前段时间接触了h5移动端的开发，移动端字体大小不同于pc端一般直接用px单位，而是经常用rem作为基础单位，常规做法使用1rem=100px的换算方式，如果设计稿是375px作为整个屏幕端度的话，那么我们换算过的屏幕宽度则为3.75rem；如果设计稿是450px的话，屏幕宽度则为4rem。具体设置方法见如下代码：
<script>fnResize()window.onresize = function () {fnResize()}function fnResize() {let deviceWidth = document.documentElement.clientWidthdocument.documentElement.style.fontSize = (deviceWidth / 3.75) + 'px'}</script>
我在页面index.html的script中写下上面代码，针对设计稿375px的总体宽度设置了1rem=375px/3.75=100px的宽度
这样在所有页面布局中可以将设计稿中的单位直接除以100得到rem单位去使用，类似如下
.home-page {height: 100%;width: 100%;font-family: "Source Han Sans CN";.above {margin: 0.18rem;height: 5.64rem;position: relative;background-image: url('../../static/home_page.png');background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;.music {position: absolute;width: 0.32rem;height: 0.32rem;border-radius: 0.16rem;right: 0.01rem;top: 0.04rem;background-image: url('../../static/music.png');background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;cursor: pointer;}.music-off {position: absolute;width: 0.32rem;height: 0.32rem;border-radius: 0.16rem;right: 0.01rem;top: 0.04rem;background-image: url('../../static/music_off.png');background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;cursor: pointer;}.en {position: absolute;color: #BB1F3A;font-weight: 600;font-size: 0.14rem;top: 1.83rem;left: 0.18rem;}.ch {position: absolute;color: #BB1F3A;font-weight: 600;font-size: 0.28rem;top: 2.63rem;left: 0.18rem;}.button {position: absolute;top: 4.1rem;height: 0.44rem;width: 1.98rem;background-color: #BB1F3A;left: calc(50% - 0.99rem);border-radius: 0.04rem;font-size: 0.12rem;text-align: center;color: #FFF;cursor: pointer;.top {margin-top: 0.04rem;height: 0.17rem;line-height: 0.17rem;font-weight: 600;}.bottom {margin-top: 0.01rem;height: 0.17rem;line-height: 0.17rem;font-weight: 500;}}.img {position: absolute;width: 0.88rem;height: 0.4rem;top: 4.90rem;left: calc(50% - 0.44rem);background-image: url('../../static/home_logo.png');background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;}}.below {height: 0.59rem;margin: 0.18rem;.left {float: left;height: 100%;width: 50%;.img {width: 1.24rem;height: 0.32rem;margin-top: 0.135rem;background-image: url('../../static/left_logo.png');background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;}}.right {float: left;height: 100%;width: 50%;background-image: url('../../static/partner.png');background-repeat: no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;}}.across {position: absolute;top: 0.45rem;width: 3.75rem;height: 1.08rem;color: #FFF;background-image: url('../../static/across.png');background-repeat: no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;text-align: center;.en {font-size: 0.13rem;margin-top: 0.32rem;height: 0.18rem;line-height: 0.18rem;font-weight: 400;}.ch {height: 0.33rem;font-size: 0.24rem;line-height: 0.33rem;font-weight: 600;letter-spacing: 0.016rem;}}}
比如.cross中的width: 3.75rem;其实相当于设计稿中的375px的整体屏幕宽度
至于为什么一般以除以100作为1rem，而不是直接1rem=1px来直接使用呢？我也试过，直接用1rem=1px，那么像我们设计稿中的375px，则为375rem，而很多移动端浏览器不支持过大的rem单位，导致375rem这种单位实际显示的是很小的一个宽度，无法占满整个屏幕
