HTML中px和em和rem的区别_html px em rem单位区别及用法【大全】-html教程-PHP中文网

px是固定像素单位，em依赖父元素font-size且基准动态切换，rem只参照根元素font-size；三者解决不同问题：px保精度，em适局部相对，rem统一大屏缩放。

html中px和em和rem的区别_html px em rem单位区别及用法【大全】

px 是固定像素，em 依赖父元素 font-size，rem 只认 html 的 font-size —— 这三者不是“换种写法”，而是解决不同问题的工具，选错单位会导致响应式失效、嵌套错乱或缩放失灵。

em 的计算基准会动态切换：用在 font-size 上时，参照父元素；用在 padding、margin 或 width 上时，参照当前元素自身的 font-size。嵌套越深，越容易失控。

常见错误现象：button 内边距忽大忽小、文字行高在组件嵌套后塌陷、第三方 UI 库样式被意外放大。

根本原因只有两个：CSS 里没用 rem，或者 html 的 font-size 被其他规则覆盖了。浏览器默认是 16px，所以 1rem 默认 = 16px，但这个值可以被 JS 动态改，也能被 CSS 中更具体的规则干掉。

Wechat HTML Publisher

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

下载

检查是否写了 html { font-size: 10px; }，而不是 body { font-size: 10px; }
确认没有更高优先级的选择器（比如 :root 或带 !important 的声明）覆盖了它
移动端常用 JS 动态设置：document.documentElement.style.fontSize = window.innerWidth / 750 * 16 + 'px';，但要注意执行时机 —— 必须在 DOM 渲染前或 DOMContentLoaded 后立即执行

兼容性注意：rem 在 IE8+、所有现代浏览器都支持，但不支持 CSS 自定义属性（var(--size)）混用时的 fallback。

px 不是“过时”，而是“不可伸缩”。它在需要绝对像素精度的场景下不可替代，强行用 rem 反而引入误差。

边框（border: 1px solid #ccc）：用 rem 会导致高 DPI 屏幕上模糊（如 0.0625rem = 1px 在 2x 屏上可能渲染为 1.5px）
图标字体（font-size: 16px）或 SVG 内联尺寸：缩放会失真，px 保证图元对齐
CSS 动画关键帧中位移量（transform: translateX(2px)）：避免因根字体变化导致动画偏移量浮动

性能影响很小，但滥用 px 做全文本/容器尺寸，会让用户缩放页面时内容溢出或留白异常 —— 尤其在 iOS Safari 的「双击放大」或 Windows 高对比度模式下。

真正难的不是记住换算关系，而是判断某个 margin 是该随文本一起缩放（用 rem），还是该保持与物理像素对齐（用 px）。多数人卡在「以为 rem 就是万能响应式解」，却忘了它只解决「比例缩放」，不解决「设备像素适配」和「语义一致性」。