H5移动端开发之基础字体大小设置

前段时间接触了h5移动端的开发，移动端字体大小不同于pc端一般直接用px单位，而是经常用rem作为基础单位，常规做法使用1rem=100px的换算方式，如果设计稿是375px作为整个屏幕端度的话，那么我们换算过的屏幕宽度则为3.75rem；如果设计稿是450px的话，屏幕宽度则为4rem。具体设置方法见如下代码：

<script>
  fnResize()
  window.onresize = function () {
   
    fnResize()
  }
  function fnResize() {
   
    let deviceWidth = document.documentElement.clientWidth
    document.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