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

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

🎯 使用 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

推荐文章

Python设计模式之工厂模式详解
2024-11-19 09:36:23 +0800 CST
在 Docker 中部署 Vue 开发环境
2024-11-18 15:04:41 +0800 CST
Vue3 结合 Driver.js 实现新手指引
2024-11-18 19:30:14 +0800 CST
JavaScript 异步编程入门
2024-11-19 07:07:43 +0800 CST
7种Go语言生成唯一ID的实用方法
2024-11-19 05:22:50 +0800 CST
一个简单的html卡片元素代码
2024-11-18 18:14:27 +0800 CST
Elasticsearch 的索引操作
2024-11-19 03:41:41 +0800 CST
php curl并发代码
2024-11-18 01:45:03 +0800 CST
Web浏览器的定时器问题思考
2024-11-18 22:19:55 +0800 CST
55个常用的JavaScript代码段
2024-11-18 22:38:45 +0800 CST
js生成器函数
2024-11-18 15:21:08 +0800 CST
Vue3中的响应式原理是什么?
2024-11-19 09:43:12 +0800 CST
Python 基于 SSE 实现流式模式
2025-02-16 17:21:01 +0800 CST
支付轮询打赏系统介绍
2024-11-18 16:40:31 +0800 CST
Rust 高性能 XML 读写库
2024-11-19 07:50:32 +0800 CST
Java环境中使用Elasticsearch
2024-11-18 22:46:32 +0800 CST
如何在Vue 3中使用Ref访问DOM元素
2024-11-17 04:22:38 +0800 CST
Go语言SQL操作实战
2024-11-18 19:30:51 +0800 CST
Vue3中如何处理权限控制?
2024-11-18 05:36:30 +0800 CST
程序员茄子在线接单