首页 前端知识 px转rem插件postcss-plugin-px2rem使用方法(浏览器缩放页面自适应)

px转rem插件postcss-plugin-px2rem使用方法(浏览器缩放页面自适应)

2024-09-06 00:09:55 前端知识 前端哥 877 905 我要收藏

px转rem插件postcss-plugin-px2rem使用方法(浏览器缩放页面自适应)

1. 常见屏幕自适应的布局
  • 百分比布局
  • rem布局
  • css媒体查询
  • 在前端框架设计初期,应优先选择好页面布局方式
2. postcss-plugin-px2rem插件的使用

官网地址:https://www.npmjs.com/package/postcss-plugin-px2rem

  1. 下载插件
npm i postcss-plugin-px2rem --save
  1. 在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)]
		}
	  }
	}
  1. 在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图表自适应问题
  1. 在main.js中进行配置
	// main.js
	import { setDomFontSize } from './utils/pxToRem'
	// 执行方法,相当于全局挂载了
	setDomFontSize()
希望我的方案对大家会有帮助,如有不足,欢迎评论区指正
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17707.html
标签
postcss
评论
发布的文章

javascript jQuery

2024-09-21 22:09:33

【若依】表格固定列宽

2024-09-21 22:09:30

Knockout-jQueryUI 使用指南

2024-09-21 22:09:29

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!