vue-cli3 配置 postcss-pxtorem

最新推荐文章于 2025-07-10 16:43:18 发布

继续继续努力

最新推荐文章于 2025-07-10 16:43:18 发布

阅读量5.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： postcss vue-cli vue.js

本文链接：https://blog.youkuaiyun.com/weixin_38578293/article/details/88775172

vue-cli 同时被 3 个专栏收录

9 篇文章

订阅专栏

vue.js

3 篇文章

订阅专栏

postcss

2 篇文章

订阅专栏

本文介绍如何通过PostCSS插件postcss-pxtorem实现响应式REM布局，并提供了一个用于动态调整根元素字体大小的JavaScript函数。

1.首先安装依赖（已配置postcss）

yarn add 或者 npm install postcss-pxtorem

2.更改package.json

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-cssnext": {},
      "postcss-pxtorem": {
        "rootValue": 16,
        "propList": [
          "*"
        ]
      }
    }
  },

3.新建一个文件比如 ./src/assets/rem.js

// 设置 rem 函数
function setRem () {
  // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
  let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
  htmlDom.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

4.在main.js引入 import './assets/rem.js'

5. 直接写px，它会自动帮你转成rem，rem.js是为了让整个页面缩放的时候整体改变