首先介绍

rem：是指相对于 html（根元素）的字体大小的单位。

flexible.js原理：1rem = 屏幕width / 10  不需要查询不同屏幕的根元素字体大小。

一、flexible.js

源代码

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10 
  function setRemUnit() {
    var rem = docEl.clientWidth / 10; //// 这里 10 是关键
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function(e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

如果项目UI是 750px ，都是以 10 为划分，1920px 的话，以 24 划分

脚本引入的话

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>

二、视口标签

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">

三、vscode 安装 cssrem 插件

打开 vscode 在扩展搜索栏输入 cssrem 。

打开 vscode 设置输入 cssrem 找到 Root Font Size 如果UI尺寸是 750px 要修改 75 ，1920px 要修改 80 ，375px 要修改 37.5 大小。

四、CSS文件 px 转 rem 单位

安装 cssrem 可以看见插件可以自动给我们转换对应的 rem 大小。

在这里再教大家一个小妙招，如果你前面已经用 px 写好全部样式了，重新一个个输入 px 大小转 rem 很是麻烦，这时候你就可以用 cssrem 快捷键了。

px -> rem (Shortcut key: Alt + z)
rem -> px (Shortcut key: Alt + z)

就会发现css里全部 px 单位自动转换为 rem 了，不需要再一个个输入转换了！

如果有小伙伴跟我一样项目UI是 750px 大小，可以在 css 上方再加上一段防止屏幕窗口超过 750px

@media screen and (min-width: 750px) {
   html {
     font-size: 75px !important;
   }
}

防止 html 字体大小过度撑开

后续如有问题，再进行补充~~~

html 使用 flexible.js + rem 适配移动端界面 px 转换 rem 单位