前端基础:自适应布局之rem布局基础

Wowoy：https://juejin.im/post/5de72b1f51882512360d3910

开启一个移动端项目的基础，首先是想好如何在代码中实现移动端适配。之前没有经验，第一个项目里简单粗暴地采用px写死的方法，觉得不好，本项目采用的是像一位优秀同事习得的rem布局方法，它可以自适应不同屏幕尺寸的设备，简单好用。

这里我们要用到两种单位:

1.vw: viewport width，相对于视口的宽度；

1vw为视口宽度的1%，100vw为设备的宽度；

2.rem: 相对于根元素html的字体大小的单位；

比如2rem=2倍的根字体大小。

rem布局非常简单，其基本原理就是根据屏幕不同的分辨率,动态修改根字体的大小,让所有的用rem单位的元素跟着屏幕尺寸一起缩放,从而达到自适应的效果。

拿我的项目来举例:我们的设计稿是按照iphone6来设计的（iphone6实际宽度 375px），而设计稿上的宽度是750px，之前是直接把所有尺寸/2，现在我会这样实现自适应：

html {
 //除以的7.5是根据设计稿的屏幕宽度来定的，
 //这样750px宽度下根元素字体大小则为750px/7.5=100px=1rem
 font-size: calc(100vw / 7.5);
}

其中，100vw是设备宽度deviceWidth，这样就实现了不同设备宽度下，动态修改根字体font-size的大小，比如：

deviceWidth = 320，font-size = 320 / 7.5 = 42.6667px //iphone5
deviceWidth = 375，font-size = 375 / 7.5 = 50px //iphone6,7,8 X
deviceWidth = 414，font-size = 414 / 6.4 = 55.2px //iphone6,7,8 plus

所以设计思路就是，根据设计稿将html的font-size设置为100px。比如750的设计稿，就除以7.5。

这样设计的原因是：实现适配只要在代码里把宽高直接将设计稿的尺寸除以100即可，换算很方便。

比方设计稿上宽高300px、96px的元素，就可以在代码中这么设置宽高

.test {
 width: 3rem 
 height: .96rem
}
//反过来验证下，iphone6，显示宽度为3*50px=150px 

但是我们又不能改变默认字体大小的展示，因此还要加一句#app的字体大小重置

html {
 font-size: calc(100vw / 7.5);
}
#app {
 font-size: initial; 
//重置页面字体大小恢复为浏览器默认16px，否则就显示成50px了
}

以上设计思路的最大优点就是：方便计算。