前端px转为rem的自适应解决方案

最新推荐文章于 2025-04-13 16:14:37 发布

麦兜_冰夕

最新推荐文章于 2025-04-13 16:14:37 发布

阅读量314

点赞数 3

分类专栏：响应式布局文章标签：前端自适应解决方案 px转为rem插件

本文链接：https://blog.youkuaiyun.com/lyn1772671980/article/details/145887555

版权

响应式布局专栏收录该内容

6 篇文章

订阅专栏

1.前端项目安装：npm install postcss-pxtorem --save-dev

2.在项目根目录下新增postcss.config.js文件，文件内容如下：

module.exports = {

  plugins: {

    'postcss-pxtorem': {

      rootValue: 16, // 1rem = 16px

      propList: ['*'], // 转换所有属性

      selectorBlackList: ['.no-rem'], // 忽略特定类名

    },

  },

};

3.动态设置根字体大小

在 src/main.js 中动态设置根元素的字体大小：

function setRem() {

  const baseSize = 16; // 基准大小

  const scale = document.documentElement.clientWidth / 1920; // 设计稿宽度为 1920px

  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'; // 限制最大缩放比例

}



setRem();

window.addEventListener('resize', setRem);

此种方案的样式需要写在css中，对于行内style中的样式不起作用