古交做网站,中国制造网内贸站,十大最免费软件排行榜,wordpress缩写是什么px转rem插件postcss-plugin-px2rem使用方法#xff08;浏览器缩放页面自适应#xff09;
1. 常见屏幕自适应的布局
百分比布局rem布局css媒体查询在前端框架设计初期#xff0c;应优先选择好页面布局方式
2. postcss-plugin-px2rem插件的使用
官网地址#xff1a;https…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, //布尔值允许在媒体查询中转换pxminPixelValue: 0 // 设置要替换的最小像素值。 默认 0}export default defineConfig{plugins:[...],css:{postcss:{plugins:[px2rem(px2remOptions)]}}}在util文件夹中创建pxToRem.js文件 注意我看其他文章上有做了性能优化加入了缩放监听防抖。加了防抖缩放时会出现那种类似于卡顿的效果但是性能上确实有优化。算是牺牲视觉效果增加性能加不加防抖不妨都试试看产品需求因人而异 // pxToRem.jsimport _ 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.onresizewindow.addEventLister两种方式的区别// 最主要的区别onresize本身就是一个回调多次执行会被覆盖通过addEventLister监听多次执行就不会被覆盖运用于循环生成多个Echarts时改变窗口大小Echarts图表自适应问题在main.js中进行配置 // main.jsimport { setDomFontSize } from ./utils/pxToRem// 执行方法相当于全局挂载了setDomFontSize()希望我的方案对大家会有帮助如有不足欢迎评论区指正
