HTML页面如何使用Rem单位做响应式布局-html教程-PHP中文网

rem值等于当前rem数乘以html元素的font-size；其核心是动态设定html的font-size（如clientwidth/7.5+’px’），而非硬背换算公式，且line-height必须用无单位值（如1.6）才能随字号等比缩放。

html页面如何使用rem单位做响应式布局

rem单位怎么算？别硬背公式，看根字号怎么定

rem 的值 = 当前元素的 rem 数 × html 元素的 font-size。比如 html { font-size: 50px; }，那么 width: 2rem; 就等于 100px。关键不是记住“750 设计稿除以 10”这种口诀，而是盯住 html 的 font-size 是多少——它才是真正的缩放开关。

常见错误是直接写死 html { font-size: 16px; }，结果在 iPhone SE 和 iPad 上字体一样大，页面挤或空；或者用媒体查询分段设 font-size，断点一多就漏适配。真正管用的做法是让 font-size 随屏幕宽度线性变化，比如：document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';（按 750px 设计稿、基准 100 计算）。

为什么 line-height 必须用无单位数值？

用 line-height: 1.6 而不是 line-height: 1.6rem 或 line-height: 24px，是因为只有无单位值才会继承当前字号的比例关系。当 html 的 font-size 从 50px 变成 35px，line-height: 1.6 自动缩为 56px → 56px，而 line-height: 24px 会卡死在 24px，小字时行距过大、文字发虚。

line-height: normal 不可靠：不同字体默认值在 1.0–1.2 之间浮动，iOS 和 Android 渲染差异明显
所有文字相关尺寸（font-size、padding、margin）统一用 rem，但 line-height 坚持无单位
如果设计稿要求行高 = 字号 × 1.5，CSS 就写 font-size: 1.2rem; line-height: 1.5;，别换算成具体像素

viewport 设置和 JS 初始化顺序不能错

没加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，window.innerWidth 拿到的是视觉视口宽度（可能被缩放干扰），不是布局视口宽度，JS 算出来的 font-size 就会偏大或偏小。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

JS 动态设置必须在 DOM 加载完成前执行，否则样式会闪动。推荐放在里立即执行，而不是等 DOMContentLoaded：

(function() {
  function refreshRem() {
    const docEl = document.documentElement;
    const clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = clientWidth / 7.5 + 'px';
  }
  refreshRem();
  window.addEventListener('resize', refreshRem);
  window.addEventListener('pageshow', e => e.persisted && refreshRem());
})();

注意：不要在 resize 里频繁触发重排，上面这段已足够稳定；pageshow 事件处理浏览器前进/后退缓存导致的 rem 失效问题。