vw 前端_移动端适配基础(rem,vw,vh

前言

主要介绍几个移动端常用的单位rem、vw、vh，配合传统的px、百分比、标签，兼容适配移动端的各种分辨率的手机端。

单位简介

rem：

顾名思义，root emphasize，根元素的font-size，

vw

屏幕宽度相关，1vw是屏幕宽度的1%

vh

屏幕高度相关，1vh是屏幕高度的1%

其它：vmin，vmax 分别表示两者中较小和较大的部分。

适配

以下假定已经存在一个使用px单位，且完全适配320xp宽度手机的页面。

1.改变viewport的initial-scale的数值，

比如适配的目标的宽度为400px

initial-scale=1.25 // 400/320=1.25

但这里有个缺点，就是得提前知道所适配的设备的尺寸,然后服务端根据userAgent来判断。

或者使用js计算缩放比例 ,然后替换initial-scale的值

var scale = screen.width/320,

viewport = document.querySelector('meta[name=viewport]');

viewport.setAttribute('content',

viewport.getAttribute('content')

.replace(/(initial-scale)=[\d\.]?\d/,'$1='+scale))

但使用js会有滞后性，页面会多渲染一