px2rem的食用方法

最新推荐文章于 2025-02-25 17:59:07 发布

小鑫a

最新推荐文章于 2025-02-25 17:59:07 发布

阅读量3.3k

点赞数

文章标签：移动适配 px2rem

安装

npm install px2rem-loader

找到 build 文件夹里的 utils.js 这个文件在cssloader 后面加入

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 40 // 40px = 1rem
            remPrecision: 8 // rem的小数点后位数
    }
  }
再然后把这行替换成
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
这个
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]

注意：这里的流程中有两次转换第一次 css中的px转换为px2rem的rem，这里是 40px = 1rem，第二步是rem适配到页面，这里的rem与像素比是根据屏幕宽度动态计算的，以375的设备为例是 1rem = 20px转换到页面中显示.这样最终实现输入 40px，屏幕上20px的效果，因为我UI标注是按照2倍图来的，所以直接按照标注写就自己转换了。

在 src 目录下创建个名为 rem.js 的文件把代码输入进去

(function() {
    function a() {
        var b = document.documentElement.clientWidth;
        b = b > 750 ? 750 : b;
        var c = b / 750 * 100;
        document.getElementsByTagName("html")[0].style.fontSize = c + "px"
    }
    a();
    window.onresize = a
})();