您的位置：首页 > 移动开发

移动端媒体查询

2017-12-22 15:26 459 查看 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--屏幕宽度小于400px,就加载a1.css-->
    <link rel="stylesheet" href="a1.css" media="screen and (max-device-width:400px)">
    <!--屏幕宽度大于600px小于400px,就加载a2.css-->
    <link rel="stylesheet" href="a2.css" media="screen and (min-width:400px) and (max-device-width:600px)">
    <style>
        @media (max-width: 1500px) {
            body{
                background: red;
                font-size: 160px;
            }
        }
        @media (min-width: 700px) and (max-width: 1000px) {
            body{
                background: pink;
                font-size: 160px;
            }
        }
        @media (min-width: 350px) and (max-width: 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-width:400px) {
            body{
                background-image: url("img_tu.jpg");
            }
        }




    </style>
</head>
<body>
<div class="box">haohao</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航