PC端网页rem适配方案

Posted 2021-06-09 盐孩儿

以1920设计稿为基准

1、使用sass语法 转换px rem ，静态站点推荐使用我之前提到的 vscode插件easy-scss 

      https://www.cnblogs.com/joyZ/p/13342794.html

// PX 转 rem
@function px2Rem($px, $base-font-size: 18px) {
    @if (unitless($px)) {
        //有无单位
        @return ($px / 19.2) * 1rem;
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1rem;
}

2、设置媒体查询

@media screen and (max-width: 1920px) {
  html {
    font-size: 19.2px;
  }
}
@media screen and (max-width: 1680px) {
  html {
    font-size: 16.8px;
  }
}
@media screen and (max-width: 1380px) {
  html {
    font-size: 14.4px;
  }
}
@media screen and (max-width: 1300px) {
  html {
    font-size: 12.8px;
  }
}

3、适配代码

   height: px2Rem(70px); -- 调用scss函数将px转换为对应rem

 

补充：

// 设计一个函数，这个函数用于获取屏幕的宽度，动态给html标签设置font-size
(function(win,doc){
    // 获取到html标签
    const docEl = doc.documentElement;
    // 检测一下目前屏幕是横屏还是竖屏
    const resizeEvent = "orientationchange" in window? "orientationchange":"resize";
    // 每个屏幕对应的font-size
    const compute = function(){
        const width = docEl.clientWidth;
        console.log(width);
        if(!width) return;
        if(width > 750){
            docEl.style.fontSize="100px";
        }else{
            docEl.style.fontSize= (width/750)* 100 +"px"
        }
    }
    // 窗口发生变化 重新计算
    win.addEventListener(resizeEvent,compute,false)
    // 页面加载了 重新计算
    doc.addEventListener("DOMContentLoaded",compute,false)
    compute();
})(window,document)