JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

手机端使用rem兼容写法

2016. 11. 15    

手机端使用rem兼容写法

首先设计图要求

750x1334 ‘750’对应的是 JS 里面的参数,可以改,但要与设计图同步;比如设计图是640x1228,JS里面就要写640,之后的页面所有尺寸都可以根据设计图的来计算,比如设计图测量出来一个宽度是200px,对应就要写2rem,同理,如果是20px,就要写0.2rem;

body {
    font-family: "微软雅黑";
    -webkit-text-size-adjust: none;
    width: 7.5rem;
    margin: 0 auto;
    height: 100%;
    -webkit-user-select: none;
    background: #F0F3F5;
    font-size: 0.24rem;
}
<script type="text/javascript" language="javascript">
	var devicewidth = Math.min(750,document.documentElement.clientWidth);
	document.documentElement.style.fontSize = devicewidth/7.5+"px";
</script>