讓px單位自動轉換爲rem的方法

開發工具： 

    編輯器：vscode;

    css預處理器：less;（無具體要求）；

步驟：

  1. vscode安裝cssrem插件；

  2. 修改css插件的默認配置，其默認轉換px爲16px, 須要改成當前項目設計的1rem所對應的px，vscode插件的默認安裝目錄通常爲 C:\Users\用戶名\.vscode\extensions；

找到 cipchk.cssrem-0.0.3  插件，打開package.json, 修改其默認配置： cssrem.rootFontSize

3. 重啓vocode, vscode的配置大功告成！

4. 引入下面的js,監聽窗口大小改變：

/**
 * 設置根字體大小
 */

var docEl = document.documentElement,
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  recalc = function () {
    if (docEl.clientWidth < 640 && docEl.clientWidth > 320) {
      docEl.style.fontSize = 32 * (docEl.clientWidth / 320) + 'px';
    } else if (docEl.clientWidth >= 640) {
      docEl.style.fontSize = '64px';
    } else if (docEl.clientWidth <= 320) {
      docEl.style.fontSize = '32px';
    }
  };
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);

6. 對body標籤進行設置：

body {
  max-width: 640px;
  min-width: 320px;
  font-family: Microsoft Yahei, Arial;
  background: #f0f0f0;
  font-size: 0.5rem;
  margin: 0 auto !important;
  /*滾動條卡頓*/
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;}