PC端网页rem适配方案

转自 https://waliblog.com/css/2018/03/19/compatible.html

PC端网站一般我们都是以1366 +1200版心线来实现的，对于特殊需求，需要使用rem的适配方案，特此记录下

记录下方案：

以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、还原设计稿

  设计稿70px 高度对应  height: px2Rem(70px);