对前端计量单位的理解：px、vw、rem、em、%等；
https://www.tiangong.cn/chatShare?share_id=e3a157fe37e041de95a2
前端开发中常见的计量单位主要包括以下几种：px (像素): 屏幕显示的最小单位，一个像素表示显示器上一个点的颜色。% (百分比): 通常相对于父元素的宽度或高度，例如 width: 50% 意味着元素的宽度是父元素宽度的一半。em: 相对于当前元素的字体尺寸，例如 font-size: 2em 表示元素的字体大小是当前字体尺寸的2倍。rem: 相对于根元素（通常是 <html> 元素）的字体尺寸，例如 font-size: 2rem 表示元素的字体大小是根元素字体尺寸的2倍。vw (视口宽度): 相对于视口宽度的百分比，1vw 等于视口宽度的1%。vh (视口高度): 相对于视口高度的百分比，1vh 等于视口高度的1%。cm, mm, in (厘米、毫米、英寸): 这些是绝对长度单位，用于打印等领域。pt (点): 1pt 等于 1/72 英寸，常用于印刷行业。pc (派卡): 1pc 等于 12pt，也常用于印刷行业。这些计量单位可以用来设置元素的宽度、高度、字体大小、边距、内边距等各种样式属性。使用合适的计量单位可以提高网页的响应性和灵活性，并确保在不同设备和屏幕尺寸上都有良好的显示效果。
一、动态rem适配方案：适合H5项目的适配方案
实现方式为：动态设置页面根元素大小，同时配合postcss-pxtorem插件pxtorem自动转换插件；
第一步：动态设置页面根元素大小
第一种：使用媒体对象@media根据屏幕的宽度设置不同的根元素大小
/* 基础样式 */
html {font-size: 16px; /* 默认字体大小 */
}/* 小屏设备（手机）样式 */
@media screen and (max-width: 600px) {html {font-size: 14px; /* 小屏设备字体大小 */}
}/* 中等屏幕（平板）样式 */
@media screen and (min-width: 601px) and (max-width: 1024px) {html {font-size: 16px; /* 中等屏幕字体大小 */}
}/* 大屏设备（桌面）样式 */
@media screen and (min-width: 1025px) {html {font-size: 18px; /* 大屏设备字体大小 */}
}第二种：使用js动态设置根元素大小
(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if(clientWidth>=750){docEl.style.fontSize = '16px';}else{docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';}};recalc()if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
第三种：使用插件lib-flexible.js动态调整根元素大小（推荐）
第二步：配合px自动转rem的插件：postcss-pxtorem
1. 安装
npm install postcss-pxtorem --save-dev
2. 文件配置
// 在项目根目录创建或编辑 postcss.config.js 文件，添加 postcss-pxtorem 插件配置
/* postcss.config.cjs */
module.exports = {plugins: {'postcss-pxtorem': {rootValue: 16, // 基准值，对应于根元素的 font-sizeunitPrecision: 5, // 保留小数点位数propList: ['*', '!min-width', '!max-width'], // 排除 min-width 和 max-width 属性selectorBlackList: [], // 忽略的选择器replace: true, // 替换而不是添加备用属性mediaQuery: false, // 允许在媒体查询中转换 pxminPixelValue: 0 // 最小的转换数值}}
};
/* vite */
export default defineConfig({css: {postcss: './postcss.config.cjs',}
})二、使用vw、vh视口单位适配H5页面
使用插件postcss-px-to-viewport实现：
1.安装
npm install postcss-px-to-viewport --save-dev2. 使用
// 需要在项目的 postcss.config.js 文件中配置这个插件
// 示例代码：
module.exports = {plugins: {'postcss-px-to-viewport': {viewportWidth: 375, // 视口的宽度，对应的是设计稿的宽度unitToConvert: 'px', // 需要转换的单位viewportUnit: 'vw', // 转换后的单位selectorBlackList: ['ignore'], // 不转换的选择器minPixelValue: 1, // 小于1px的不转换mediaQuery: false // 是否允许在媒体查询中转换}}
}
)
