移动端H5学习整理

1、移动端自适应原理

首先先了解几个常用单位
px: 固定长度单位
vw: 相对于视图窗口的宽度，规定1vw即为当前屏幕宽度的1%
vh: 相对于视口的高度，……1%。（因高度数字分100份后，不便于计算，使用较少）
vm: 相对视口高或宽中，取最小的，即vw | vh。（使用较少）
em: 相对单位长度，相对于父级的字体尺寸。(受直接父级font-size的影响，变动大，不能用来做全局自适应)
rem: 相对单位长度，相对于根html的字体尺寸。不受非html外的font-size的影响，常结合js用来做页面自适应

常用页面自适应方法：
1、百分比，不推荐，因为高度不好做自适应，容器容易变形

2、媒体样式，对自适应要求不高的pc端网站可用。移动端不推荐，因移动端的终端类型太多，使用此种方式，很难兼容所有机型。

3、px转换vw的加载器实现自适应（推荐使用）
因 vw=视图窗口宽度/100 , 以ipone6/7/8为标准的设计稿为750px，则此时 vw= 750/100 = 7.5px，等价于 1px=1/7.5 vw。
当然，开发过程中，设计稿给出的都是px单位，这里我们也不需要自己去算px转化为vw的具体值。
可以借助px转换vw的加载器style-vw-loader或者动态语言px to vw实现自动转化。

4、rem单位结合js实现自适应（推荐使用，h5页面使用较多的方式）
因为rem是相对于html上的font-size的单位。所以可以根据js算出html的动态根font-size，标准设计稿下根font-size可以设置为设计稿的二十分之一（注意这里可以为任意分值，只要和px转化为rem的倍数相同即可，这里除以20倍，是用了便于计算） font-size = 750/20 = 37.5，则此时1re