px转rem插件postcss-plugin-px2rem使用方法（浏览器缩放页面自适应）
1. 常见屏幕自适应的布局
- 百分比布局
- rem布局
- css媒体查询
- 在前端框架设计初期，应优先选择好页面布局方式
2. postcss-plugin-px2rem插件的使用
官网地址：https://www.npmjs.com/package/postcss-plugin-px2rem
- 下载插件
npm i postcss-plugin-px2rem --save
- 在vite.config.js
import px2rem from 'postcss-plugin-px2rem';
// 插件的参数设置
const px2remOptions = {
rootValue: 16, //换算基数， 默认100 ,根元素字体的大小
unitPrecision: 5, //允许REM单位增长到的十进制数字，其实就是精度控制
// propWhiteList: [], // 白名单
// propBlackList: [], // 黑名单
exclude:false, //默认false，排除某些文件夹的方法，例如/(node_module)/ 。
// selectorBlackList: [], //要忽略并保留为 px 的选择器。可以是字符串或者正则表达式
// ignoreIdentifier: false, //（boolean/string）一种忽略单个属性的方法，当启用 ignoreIdentifier 时，replace将自动设置为true。
// replace: true, // （布尔值）替换包含 rems 的规则，而不是添加后备规则。
mediaQuery: false, //（布尔值）允许在媒体查询中转换px
minPixelValue: 0 // 设置要替换的最小像素值。 默认 0
}
export default defineConfig（{
plugins:[...],
css:{
postcss:{
plugins:[px2rem(px2remOptions)]
}
}
}）
- 在util文件夹中创建pxToRem.js文件
注意：我看其他文章上有做了性能优化，加入了缩放监听防抖。加了防抖，缩放时，会出现那种类似于卡顿的效果，但是性能上确实有优化。（算是牺牲视觉效果增加性能，加不加防抖不妨都试试，看产品需求，因人而异）
// pxToRem.js
import _ from 'lodash'
// 以1920px 底图为准开发页面，动态修改根元素字体的大小
export const setDomFontSize = () => {
let width = document.documentElement.clientWidth || document.body.clientWidth;
let fontsize = (width <= 200 ? 1200 : width) / 100 + 'px';
(document.getElementsByTagName('html')[0].style)['font-size'] = fontsize;
}
// let setDomFontSizeDebounce = _.debounce(setDomFontSize, 400)
// window.addEventListener('resize', setDomFontSizeDebounce); // 浏览器加入收缩监听防抖，重新计算rem配置
window.addEventListener('resize', setDomFontSize);
// 这里有个知识点： window.onresize，window.addEventLister两种方式的区别
// 最主要的区别：onresize本身就是一个回调，多次执行会被覆盖，通过addEventLister监听多次执行就不会被覆盖，运用于循环生成多个Echarts时，改变窗口大小，Echarts图表自适应问题
- 在main.js中进行配置
// main.js
import { setDomFontSize } from './utils/pxToRem'
// 执行方法，相当于全局挂载了
setDomFontSize()
