CSS使用 REM布局

1. 在入口文件新增自执行函数

_initFontSize:function (){
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
 },

2. 监听窗口变化

window.addEventListener('resize',_initFontSize,false);})();

3. UI配置 100px == 1rem
   

4. 页面使用

header {
    width: 7.5rem;
    height: 0.88rem;
    line-height: 0.88rem;
    background: #ffffff;
    box-shadow: 0rem -0.01rem 0rem 0rem rgba(17, 31, 44, 0.08);
    display: flex;
    .header-item {
      flex: 1;
      text-align: center;
      width: 0.9rem;
      height: 0.88rem;
      font-size: 0.3rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(17, 31, 44, 0.56);
    }
    .checkItem {
      color: #007aff;
    }
    .checkItem::after {
      content: "";
      width: 0.48rem;
      height: 0.06rem;
      display: block;
      margin: 0 auto;
      border-bottom: 0.06rem solid #007aff;
      border-radius: 0.03rem;
    }
  }

5. 效果
   小屏
   
   大屏