根据移动端设计稿,通过JS计算,使用rem作为单位
有一种简单的方法,就是直接在html标签里面写上:
html {
font-size: 62.5%
}
这样,1rem为10px,比较好计算,麻烦的是在chrome浏览器下,最小只支持12px,所以显示有问题。
所以来看看使用JS计算的方式来确定rem的值:
<script>document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 40 + 'px'</script>
计算后,在设计稿宽度为750px下,1rem等于20px。