响应式布局媒体查询

最新推荐文章于 2022-08-16 19:10:35 发布

DeviL丨MCry

最新推荐文章于 2022-08-16 19:10:35 发布

阅读量159

点赞数

媒体查询主要是对各种移动端设备的一个响应式兼容，可以在

@media only screen and (min-width: 屏幕宽度最小值) and (max-width: 屏幕宽度最大值){你所要兼容的模块}

中设置你想要的浏览器屏幕大小与浏览器中内容随浏览器的大小改变，来改变自己的整体布局。解决页面乱码问题。

但是我们在遇到不同的设备时我们也需要来设置不同的屏幕宽度，（注：屏幕的高度最好使用100%，这样你的网页在不同的设备上的高度都是满屏的，如果给了固定高度的话，可能出现尾部有空白）以下我来分享几种常见的移动端设备；

/*最大1200px显屏*/
@media screen and (max-width : 1200px) {}

/*最大800px显屏*/
@media screen and (max-width : 800px) {}

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {}

/*最大640px显屏*/
@media screen and (max-width : 640px) {}

/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) {
}
/*iPad横板显屏*/
@media screen and (max-device-width: 1024px) and (orientation: landscape) {  }

/*iPad竖板显屏*/
@media screen and (max-device-width: 768px) and (orientation: portrait) {  }

/*iPhone 和 Smartphones*/
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {  }

在媒体查询的里面注意我们一定不要设置绝对长度，否则你接下来可能会遇到浏览器缩小时出现页面不能跟着浏览器一起缩小的情况。
所以我们必须要了解当前的几种浏览器相对长度（rem、em），
1.em
在布局中是根据父元素的大小来改变大小的；
2.rem
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合（1em = 16px），我们在根元素上一般都会先设置一个大小（例如：font-size：12px），那么我们在计算时就要按照根元素的东西来计算，（例如：设置一个字体大小为16px的样式，{16/12=1.33rem}）

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
          /*根元素*/html {
                  font-family:"微软雅黑";
                  -ms-text-size-adjust: 100%;
                  -webkit-text-size-adjust: 100%;
                  font-size: 62.5%;/*根元素设置字体大小为10，计算（10/16*100%=62.5%）其中的16为浏览器默认的字体大小*/
              }
        /*父元素*/  body {
                      font-size:1.4rem;/*父元素设置字体为14px，计算（14/10=1.4rem）*/
                     -webkit-overflow-scrolling: touch;
                 }
        div{
            float: left;
            width:23%;
            height: 100px;
            margin: 0 1%;
        }
        #div1{
            background-color: #006699;
            font-size: 3rem;
        }
        #div2{
            background-color: #ff6666;
            font-size: 3em;
        }
        #div3{
            background-color: #ffff00;
            font-size: 3rem;
        }
        #div4{
            background-color: #123456;
            font-size: 3em;
        }
        @media only screen and (min-width: 601px) and (max-width: 980px) {
            div{
                width: 48%;
                margin: 0 1%;
            }
        }
        @media only screen and (max-width: 600px) {
            div{
                width: 96%;
                margin: 0 2%;
            }
        }
    </style>
</head>
<body>
<div id="div1">一</div>
<div id="div2">二</div>
<div id="div3">三</div>
<div id="div4">四</div>
</body>
</html>

DeviL丨MCry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局媒体查询

媒体查询主要是对各种移动端设备的一个响应式兼容，可以在@media only screen and (min-width: 屏幕宽度最小值) and (max-width: 屏幕宽度最大值){你所要兼容的模块}中设置你想要的浏览器屏幕大小与浏览器中内容随浏览器的大小改变，来改变自己的整体布局。解决页面乱码问题。但是我们在遇到不同的设备时我们也需要来设置不同的屏幕宽度，（注：屏幕的高度最好使用...
复制链接

扫一扫