如何使用新单位rem

手机端需加上第一条，PC无视：

1、需要先加上（手机端获取物理设备尺寸）

1 2	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=5,user-scalable=no"> //获取手机端物理设备尺寸

2、先初始化页面默认的字号大小

1 2	html{font-size: 20px;}

这个值将是页面上布局的一个标准，所有的宽度高度都需要除以这个值再写到页面上去，而此时页面上的单位就不是px了，而是:rem；

算法：（设计稿尺寸/设定的值），可根据具体稿子具体设定这个值。
如果要自适应屏幕大小，那就需要进行第三步,动态修改这个初始值！

3、接上第二步，假如设计稿是1000px宽度，要做成1000px的页面。按第二步的算法：（设计稿尺寸/设定的值），1000/20 = 50；

相当于把1000分成50个相同的等份，每一份是20px，如果只是按设计比例做成相应的页面，倒不需要处理什么；

问题就在于：假如设计稿是1000px,而物理设备的宽度只有500px，那在页面上就需要整体除以一半才能做到自适应，
我们就需要动态的去修改每一份的值.
算法如下：

屏幕宽度 / 设计稿宽度 * html初始化的值（这里是20），代码如下：

1 2 3 4 5 6

//获取屏幕宽度改变rem设置的值 var CWidth = document.documentElement.clientWidth || document.body.clientWidth; // console.log(CWidth); document.documentElement.style.fontSize = (CWidth/640*20)+"px";