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

最新推荐文章于 2025-08-08 14:03:48 发布

juliotang

最新推荐文章于 2025-08-08 14:03:48 发布

阅读量5.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： html5 javascript

本文链接：https://blog.csdn.net/juliotang/article/details/114821355

在H5移动端开发中，通常使用rem作为基础字体大小单位，而非px。例如，若设计稿宽度为375px，则1rem=375px/3.75=100px。这样可以方便地将设计稿尺寸转换为rem单位，如.width: 3.75rem;对应设计稿的375px。避免直接使用1rem=1px，因为某些浏览器不支持大rem值，可能导致显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间接触了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;
      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这种单位实际显示的是很小的一个宽度，无法占满整个屏幕