rem布局
em和rem的认识
在布局中，除了px之外，还有两个常见的单位，em和rem
em： 相对于当前元素的字体大小→ 1em = 当前标签的font-size
rem： 相对于根元素（html）的字体大小→ 1rem = html标签的font-size
浏览器默认的font-size的大小为16px
rem布局的效果：
- 屏幕越大，标签就越大
- 屏幕越小，标签就越小
rem布局的原理：
通过媒体查询的方式动态改变html标签的font-size的大小
- 当屏幕越大，让html标签的font-size变大即可
- 当屏幕越小，让html标签的font-size变小即可
为什么要用rem布局
现状：
由于市面上手机种类繁多，导致移动端的屏幕种类非常的混乱，比如有常见的320px 360px 375px 384px 480px 640px等。在开发中，UI一般只会提供 750px 或者是 640px 的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕。常见的方案有以下：
-
流式布局： 戳这里了解流式布局
- 优点：各种屏幕都适配，都能看
- 缺点：只有当屏幕大小和设计图相同时才能完美还原设计图，其他屏幕下都会拉伸
-
响应式布局：戳这里详细了解响应式布局及媒体查询原理
一般多用于简单的网页和从零开始的站点。
- 优点：一套页面可以适配多个客户端。
- 缺点：对于复杂的网页来说工作量太大，维护性太难。
-
rem布局：
- 优点：rem布局盒子适配所有的屏幕，并且可以在多个屏幕大小中完美还原设计图（等比例缩放）
rem布局适配多个屏幕
rem布局适配的原理说白了，就是根据屏幕的大小，动态的改变html标签的font-size的大小，此时就可以配合媒体查询做到不同屏幕的适配
注意点：
因为要求页面是等比例缩放的，所以：
设计图的屏幕宽度/给设计图设置的font-size = 你需要适配的屏幕宽度/你需要适配屏幕的fong-size
保证屏幕宽度与html标签font-size的比例相同，就可以轻松适配多个屏幕
以苏宁为例:
适配的步骤：
- 先适配设计图的屏幕大小（比如：750px），并且根据设计图屏幕大小定义一个html标签的font-size的大小（比如：50px），此时屏幕大小与font-size的比例为15
- 因为是等比例缩放的，所以每一个适配的屏幕大小与font-size的比例都是相同的，所以各个屏幕大小除以比例就能得出font-size的大小
/* 苏宁官网中适配了：750 720 540 480 424 414 400 384 375 360 320 */
/* 第一步先适配750的屏幕 */
/* 定义设计图屏幕大小html的font-size值为50px(可以随意定,我这里就以50为例) */
/* 比例为15(750/50) */
/* 设置媒体查询样式生效的最小宽为750px——》只有当屏幕宽度大于等于600px时，样式才会生效！！*/
@media screen and (min-width:750px) {
html {
font-size: 50px;
}
}
/* 用less函数封装 */
.adapter(@width) {
@media screen and (min-width:@width) {
html {
/* round(数值)：让这个数值四舍五入 */
/* round(数值，保留几位小数) */
font-size: round(@width/15,2);
}
}
}
.adapter(320px);
.adapter(360px);
.adapter(375px);
.adapter(384px);
.adapter(400px);
.adapter(414px);
.adapter(424px);
.adapter(480px);
.adapter(540px);
.adapter(720px);
.adapter(750px);
/* 这样就适配完成了 */
在上面的的适配中用到了less函数封装媒体查询戳这里了解less函数的使用
在rem布局中,需要把px的单位转换成rem,每一次都需要手动写式子把px转换成rem比较麻烦，在这里给大家推荐一款插件
px2rem插件的使用
-
安装插件 px2rem
-
每次写数字px之后，会有提示转换成rem，按下键回车即可
-
插件中默认html的font-size的大小为16px，所以默认是除以16的如果需要更改，需要进行配置（如：设计如是750，html标签的font-size的大小为50px，此时应该除以50）
在设置中搜索px2rem，然后直接修改设置即可，注意设置完了之后需要重启才能生效！！
