编程 使用 rem 适配 PC 与移动端——原理与实战指南

2025-07-02 09:02:48 +0800 CST views 17

🎯 使用 rem 适配 PC 与移动端——原理与实战指南

一、核心原理

  • rem 单位基于根元素(<html>)的 font-size
  • 修改 htmlfont-size,页面上所有以 rem 为单位的样式都会动态调整。
  • 示例:若 html { font-size:16px; },则 1rem = 16px;若设为 32px,则 1rem = 32px

二、方案概览:flexible.js + postcss-pxtorem

方案特点

  1. 开发阶段使用 px 编写,贴合设计稿;
  2. 构建阶段自动转换,PostCSS 插件将 px => rem;
  3. 运行阶段动态赋值,根据窗口宽度设置 htmlfont-size,实现视觉适配。

三、实现细节

1. flexible.js:动态设定根字体

(function(window, document) {
  const docEl = document.documentElement;
  const breakpoints = [
    { min: 0,    max: 480 },
    { min: 481,  max: 767 },
    { min: 768,  max: 1023 },
    { min: 1024, max: 1279 },
    { min: 1280, max: 1919 },
    { min: 1920, max: Infinity }
  ];
  const remBase = 100;

  function setRemUnit() {
    const w = docEl.clientWidth;
    let rem;

    for (const bp of breakpoints) {
      if (w >= bp.min && w <= bp.max) {
        rem = bp.max === Infinity
          ? remBase
          : remBase + remBase * (w - bp.min) / (bp.max - bp.min);
        break;
      }
    }
    if (rem == null) {
      const bp0 = breakpoints[0];
      rem = remBase * (w - bp0.min) / (bp0.max - bp0.min);
    }

    docEl.style.fontSize = rem + 'px';
  }

  setRemUnit();
  window.addEventListener('resize', setRemUnit);
  window.addEventListener('pageshow', e => e.persisted && setRemUnit());
})(window, document);
  • 根据视口宽度分段设置根字体;
  • 常与 main.js 配合加载;
  • 实现不同屏幕下 1rem 的像素值平滑变化。

2. postcss-pxtorem 插件:构建阶段自动转换

安装(建议锁定版本)

npm uninstall postcss-pxtorem
npm install postcss-pxtorem@5.1.1 --save-dev

配置示例(以 Vite 为例)

import postCssPxToRem from 'postcss-pxtorem';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 192,   // 1920 设计稿下,1rem = 192px
          propList: ['*'],  // 所有 px 属性均转换
        })
      ]
    }
  }
});
  • rootValue:用于计算 1rem = rootValue px
  • propList:控制需转换的属性,['*'] 表示全部;
  • 行内样式中的 px 默认不转换;
  • 可通过写 1Px2PX 忽略单个样式转换。

四、完整流程

阶段工具作用说明
开发阶段px 编写样式保持设计稿一致,易于计算
构建阶段postcss-pxtorem 插件自动将 CSS 中所有 px 转为 rem
运行时flexible.js实时调整根字体,驱动响应式布局

这样就实现了“一套代码,适配多端”设计理念。


五、最佳实践与注意事项

  1. rem 是相对单位,不是响应式手段。它可根据根字体变化进行缩放,但不替代流式布局或百分比响应。
  2. 62.5% 方式谨慎使用:将 html 的字体设为 62.5%(即 10px),虽然简化了 rem 换算,但可能干扰用户预设习惯,不推荐。
  3. 合理设置断点与基准尺寸flexible.js 的分段与 postcss-pxtoremrootValue 应匹配规划,以维护视觉一致性。
  4. 避免在边框、阴影等视觉细节上使用 rem:推荐使用 px,以保证元素样式的一致性和细腻度。
  5. 行内样式需额外处理:PostCSS 插件不作用于行内样式或 JS 动态样式,需手动替换或通过 JS 方式计算转换。

六、小结 ✨

通过 flexible.js + postcss-pxtorem,你可以:

  • 按设计稿书写 px,保持开发体验;
  • 自动转换为 rem,提升可维护性与兼容性;
  • 动态调整根字体,实现对多屏幕尺寸的适配。

联合使用后,能够快速构建一套兼容 PC + 移动端的自适应布局体系,既贴合设计,也高效开发。

复制全文 生成海报 前端开发 响应式设计 CSS

推荐文章

Vue3中如何处理异步操作?
2024-11-19 04:06:07 +0800 CST
php内置函数除法取整和取余数
2024-11-19 10:11:51 +0800 CST
页面不存在404
2024-11-19 02:13:01 +0800 CST
Go 开发中的热加载指南
2024-11-18 23:01:27 +0800 CST
PHP来做一个短网址(短链接)服务
2024-11-17 22:18:37 +0800 CST
PHP如何进行MySQL数据备份?
2024-11-18 20:40:25 +0800 CST
Go 1.23 中的新包:unique
2024-11-18 12:32:57 +0800 CST
Nginx 反向代理
2024-11-19 08:02:10 +0800 CST
CSS实现亚克力和磨砂玻璃效果
2024-11-18 01:21:20 +0800 CST
你可能不知道的 18 个前端技巧
2025-06-12 13:15:26 +0800 CST
Vue3 实现页面上下滑动方案
2025-06-28 17:07:57 +0800 CST
2024年公司官方网站建设费用解析
2024-11-18 20:21:19 +0800 CST
Vue 中如何处理跨组件通信?
2024-11-17 15:59:54 +0800 CST
mysql int bigint 自增索引范围
2024-11-18 07:29:12 +0800 CST
IP地址获取函数
2024-11-19 00:03:29 +0800 CST
pin.gl是基于WebRTC的屏幕共享工具
2024-11-19 06:38:05 +0800 CST
Vue中如何使用API发送异步请求?
2024-11-19 10:04:27 +0800 CST
在 Nginx 中保存并记录 POST 数据
2024-11-19 06:54:06 +0800 CST
从Go开发者的视角看Rust
2024-11-18 11:49:49 +0800 CST
程序员茄子在线接单