zoukankan      html  css  js  c++  java
  • 移动端媒体查询

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--屏幕宽度小于400px,就加载a1.css-->
    <link rel="stylesheet" href="a1.css" media="screen and (max-device-400px)">
    <!--屏幕宽度大于600px小于400px,就加载a2.css-->
    <link rel="stylesheet" href="a2.css" media="screen and (min-400px) and (max-device-600px)">
    <style>
    @media (max- 1500px) {
    body{
    background: red;
    font-size: 160px;
    }
    }
    @media (min- 700px) and (max- 1000px) {
    body{
    background: pink;
    font-size: 160px;
    }
    }
    @media (min- 350px) and (max- 700px) {
    body{
    background: black;
    font-size: 160px;
    }
    }
    /* 如果是横屏,背景将是浅蓝色 竖屏portrait*/
    @media only screen and (orientation: landscape) {
    body{
    background-color: lightblue;
    }
    }
    /*屏幕小于400px,显示小图*/
    body{
    background-image: url(img_smalltu.jpg);
    }
    /*屏幕大于等于400px,显示大图*/
    @media only screen and (min-400px) {
    body{
    background-image: url("img_tu.jpg");
    }
    }




    </style>
    </head>
    <body>
    <div class="box">haohao</div>
    </body>
  • 相关阅读:
    day4-生成器
    第三天-函数
    编码问题
    可变不可变类型总结
    由var与let引起的百度地图所有的覆盖点的信息都是最后一个的
    《企业应用架构模式》 三
    IndexDB
    ESA与SOA
    SOA
    Dubbo(一)
  • 原文地址:https://www.cnblogs.com/zr123/p/8086200.html
Copyright © 2011-2022 走看看