媒体查询 + 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
网友评论