Skip to content
On this page

https://www.jianshu.com/p/4abf192b175f

keywords

响应式 rem 布局

flexible amfe/lib-flexible

https://github.com/amfe/lib-flexible/blob/2.0/index.js 代码来源:all-project\H5\remote\CRMEB-H5\src\assets\js\media_750.js

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

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 7.5;
    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);
  }

  // WeixinJSBridge 后加的,非amfe/lib-flexible中的代码
  if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
    handleFontSize();
  } else {
    if (document.addEventListener) {
      document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    } else if (document.attachEvent) {
      document.attachEvent("WeixinJSBridgeReady", handleFontSize);
      document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
    }
  }
  function handleFontSize() {
    // 设置网页字体为默认大小
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    // 重写设置网页字体大小的事件
    WeixinJSBridge.on('menu:setfont', function() {
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    });
  }

})(window, document);

taro h5模板里的方案

javascript
!(function (n) {
  function e() {
    var e = n.document.documentElement,
      t = e.getBoundingClientRect().width;
    e.style.fontSize =
      t >= 640 ? "40px" : t <= 320 ? "20px" : (t / 320) * 20 + "px";
  }
  n.addEventListener("resize", function () {
    e();
  }),
    e();
})(window);

vw

typescript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
    />
    <title>rem-vw</title>
    <style>
      html {
        /* 6.4rem是100%宽 */
        font-size: 15.625vw;
      }
    </style>
  </head>
  <body></body>
</html>

postcss-px-to-viewport

https://www.bilibili.com/video/BV1XT411E7jH/?spm_id_from=444.41.header_right.history_list.click&vd_source=11e14f37a256537712e73b4b7f52411c vue.config.js image.png

postcss-pxtorem

typescript
css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),// 前缀插件
          pxtorem({
            rootValue: 37.5,
            propList: ["*", "!border*"],
          }),
        ],
      },
    },
  },

粤ICP备2024285819号