移动端网页开发-vh/vw/rem

第一次做移动端网页开发，接触到的几个单位vh/vw/rem，记录一下。
vh：相对可见视区的高度
vw：相对可见视区的宽度
rem：相对根元素的字体大小

“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小

height:100vh

在做视区覆盖时，使用height:100vh，在chorme开发者工具切换各设备时，各尺寸屏幕完美适配。但是使用手机chrome浏览器查看时，发现页面可以滑动，感觉高度好像高了一样（其实并没有，chrome没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，从而在地址栏显示或者隐藏时会显示不同，其他手机浏览器也有类似的问题），很不舒服。所以在移动端尽量避免使用100vh，改为js设置视口高度:window.innerHeight

rem布局

关于rem，一般都是设置iphone6的font-size为16px（在scale=1时，font-size=16）。可以动态设置来适配其他设备。

根元素fontSize公式：width/fontSize = baseWidth/baseFontSize
// 其中，baseWidth, baseFontSize是选为基准的设备宽度及其根元素大小，width, fontSize为所求设备的宽度及其根元素大小，来自https://blog.youkuaiyun.com/ws379374000/article/details/78686101一文

vw布局

在vw布局中，盒子的高宽、内外边距、字体大小等都可以使用vw。可以使用scss语法定义一个函数来转换px为vw。关于vw某些机型无法适配的问题，可以参考这篇文章：https://blog.youkuaiyun.com/zjw0742/article/details/79337336