让px单位自动转换为rem的方法

Posted 2020-10-18 minimissile

开发工具： 

    编辑器：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;
}