移动端布局-媒体查询 + rem单位布局

媒体查询 + rem单位布局

说道这个布局，，那么我们首先得了解什么是媒体查询，rem是什么？

媒体查询：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

@media all and （条件）{

 css的语法

}

这句代码会自动的获取到设备的视口宽度，来匹配条件

@media all and （min-width：500px）{

 body{

     background:red;

 }

}

@media all and （min-width：700px）{

 body{

     background:green;

 }

}

@media all and （min-width：900px）{

 body{

     background:black;

 }

}

上面的代码表示：

（1）如果视口的最小宽度是500px的时候,则body的背景颜色为red，

（2）如果视口的最小宽度为700px的时候，则body的背景颜色为green，

（3）如果视口的最小宽度为900px的时候，则body的背景颜色为black，

这就是根据媒体查询去获取视口的宽度，来相应的的改变样式，这就是媒体查询，

那么rem是什么呢？

rem(font size of the root element)是指相对于根元素 (html)的字体大小的单位。

如果一个页面中html{font-size:16px;},那么1rem = 16px，2rem = 32px;

了解到这两个概念之后，那么他们是怎么配合布局移动端呢？接下来看下面的代码。

@media all and （min-width：320px）{

 html{

     font-size:12px;

 }

}

@media all and （min-width：375px）{

 body{

     font-size:14px;

 }

}

@media all and （min-width：414px）{

 body{

       font-size:16px;

 }

}

div{

width:10rem;

height:10rem;
}

就以我们最常见的几个手机型号为例，上述代码的表达的是，

（1）当页面处于视口为320px的设备下，html根节点的字体大小为12px，那么div 的宽高为120px*120px;

（2）当页面处于视口为375px的设备下，html根节点的字体大小为14px，那么div的宽高为140px*140px;

（3）当页面处于视口为414px的设备下，html根节点的字体大小为16px，那么div的宽高为160px*160px;

那么为什么要这样使用呢？

在移动端，如果的你设置一个div的宽高都固定为200px的情况下，在414px视口下面，一行你可以放下两个div，那么在小于400px以下的视口设备中你都只能放下一个，这样就会是得布局错乱，好比一个物体在一个超大空间中显得很小，但是在小的空间存放不下，为使得页面布局不管在什么设备上都是正常，协调的情况，就会采用媒体查询 + rem，来根据不同的设备去相应的改变元素的大小。

---

本文来自 Willa-维拉 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/weixin_42574100/article/details/82685521?utm_source=copy