CSS使用 REM布局

晴天有点孤单

于 2021-07-08 17:52:26 发布

阅读量334

点赞数 1

分类专栏： # HTML+CSS 晴天有点孤单文章标签： css rem

本文链接：https://blog.csdn.net/qq_39517820/article/details/118578941

版权

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

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

监听窗口变化

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

UI配置 100px == 1rem
页面使用

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 {
      col