pxtorem的理解-CSDN博客

本文详细介绍了在Vue3项目中如何配置并使用postcss-pxtorem实现px到rem的转换，以实现移动端的响应式布局。通过设置根元素字体大小和rootValue，确保等比适配。同时解释了remUnit与根字体大小的关系，以及页面宽度变化时rem的计算方式。通过调整rootValue，可以控制不同屏幕宽度下的元素尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在vue3中使用

1、安装postcss-pxtorem

npm install postcss-pxtorem -D

2、在根目录下创建postcss.config.js

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 16, 
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

3、在根目录src中新建util目录下新建rem.js等比适配文件

// rem等比适配配置文件
// 基准大小
const baseSize = 16 // 注意此值要与 postcss.config.js 文件中的 rootValue保持一致
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 375宽的缩放比例，可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。
  const scale = document.documentElement.clientWidth / 1600
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  console.log("我执行了")
  setRem()
}

4、在mian.js中引入

import "./utils/rem"

5、在js中怎么处理

由于插件是对style中的px进行转换为rem，所以这里如果要用js也进行计算，那就用需要使用的像素大小，除以remUnit就行，比如：

let remUnit=100;
let width = '3200px';

//得到rem为
let rem =  3200/100;
//即  3200px = 32rem

2、理解

很长时间自己对这个配置都是一知半解，反正按照别人的配置方法能用。
但是remUnit和根路径的fontSize到底什么关系自己却说不那么清楚，所以今天特意理一理。

remunit保持 ---不变
页面中转换出来的文字大小 ---不变
html根标签文字大小 ---会变

页面中px转换为rem的方式为：像素/rootValue
如果页面的宽度为600，给rootValue设置为60，那么页面宽度转换结果为10rem。

设置 根元素的font-size为 document.documentElement.clientWidth / 10（本例中也就是60px）。
当页面缩放到一半时（300），300/10 = 30px。

因为计算出来的页面宽度为10rem，所以总宽度为 10*30px = 300px。


如果 rootValue为30  600/30 = 20 页面宽度20rem；
font-size同上 60px（一个rem为60px）；

20 * 60 = 1200;


//----------
比如页面宽度设置为1600
1600 / 16 = 100（宽度为100rem）

如果当前页面宽度拖动到1600宽 16 * 1px，根元素16px --16*100 = 1600

如果 宽度到3200 
3200 / 16 = 200
根元素 16 * 200 = 3200



这里就用一种笨方法梳理下。