js实现rem
rem 单位简介
rem（root em）是 CSS 中的相对长度单位，基于根元素（html）的字体大小进行计算。1rem 等于根元素的字体大小，默认情况下浏览器根元素字体大小为 16px。
动态设置 rem 基准值
通过 JavaScript 动态计算并设置根元素的字体大小，实现页面元素的等比缩放：
// 设计稿宽度（根据实际项目调整）
const designWidth = 750;
// 设计稿基准字体大小（通常为100px便于计算）
const baseFontSize = 100;
function setRem() {
// 获取视口宽度
const clientWidth = document.documentElement.clientWidth;
// 计算比例值
const scale = clientWidth / designWidth;
// 设置根字体大小
document.documentElement.style.fontSize = baseFontSize * scale + 'px';
}
// 初始化执行
setRem();
// 窗口大小变化时重新计算
window.addEventListener('resize', setRem);CSS 中使用 rem
在 CSS 中直接使用 rem 单位，数值基于设计稿尺寸除以基准字体大小（100）：
.element {
width: 1.5rem; /* 设计稿中150px的元素 */
font-size: 0.28rem; /* 设计稿中28px的文字 */
}移动端适配补充
对于移动端项目，建议在 HTML 头部添加 viewport 设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">PostCSS 自动转换方案
在构建工具中可使用 postcss-pxtorem 插件自动将 px 转换为 rem：
// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 100,
propList: ['*'],
selectorBlackList: [/^html$/]
}
}
}注意事项
- 避免在非根元素上设置 font-size 为 rem 单位
- 图片等固定尺寸元素可考虑使用 px 单位
- 弹性布局（flex/grid）可与 rem 单位配合使用
- 临界值处理：可设置最大/最小字体大小限制
该方案可实现不同设备上的等比缩放，保持设计稿的视觉比例关系。实际开发时应根据项目需求调整设计稿宽度和基准字体大小参数。
