目录
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