对前端计量单位的理解：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-dev2. 文件配置
// 在项目根目录创建或编辑 postcss.config.js 文件，添加 postcss-pxtorem 插件配置/* postcss.config.cjs */module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 16, // 基准值，对应于根元素的 font-size unitPrecision: 5, // 保留小数点位数 propList: ['*', '!min-width', '!max-width'], // 排除 min-width 和 max-width 属性 selectorBlackList: [], // 忽略的选择器 replace: true, // 替换而不是添加备用属性 mediaQuery: false, // 允许在媒体查询中转换 px minPixelValue: 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 // 是否允许在媒体查询中转换 } }}