如何根据移动端设计图设计rem比例

rem

rem是css单位，rem是根据根html元素的字体大小来计算单位的。
浏览器默认的 html font-size=16px， 这样如果我们需要设置字体的大小为12px, 通过计算可知 12 / 16 = 0.75；因此只需要设置 font-size= 0.75rem。

1. 现在页面上设置用户禁止缩放 引入meta头部标签

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2. 创建rem.js 文件

window.onload = function(){
   function rem(){
	   document.documentElement.style.fontSize=document.documentElement.clientWidth / 7.5 + 'px';
	// 此处的7.5是指效果图宽为 750px
	}
rem()
window.onresize = rem()  
}

3. 最后给body设置一下字体大小

body{
	font-size:0.16rem;
}