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);