px、em、rem 完整区别（直白易懂）
发布时间：2026-06-23
作者：管理员
来源：本站
浏览量（113）
点赞（57）
摘要：1. px 像素（固定单位）本质：绝对单位，1px = 屏幕物理像素点参考基准：固定不变，不受字体、根字号影响特点：写死尺寸，缩放页面、改浏览器字号时不会自适应适合边框、阴影、固定小间距、SVG 尺寸示例：width:50px; font-size:14px;2. em 相对父元素字号基准：当前元素父级的 font-size计算规则：1em = 父元素font-size坑
1. px 像素（固定单位）
本质：绝对单位，1px = 屏幕物理像素点
参考基准：固定不变，不受字体、根字号影响
特点：
写死尺寸，缩放页面、改浏览器字号时不会自适应
适合边框、阴影、固定小间距、SVG 尺寸
示例：
width:50px; font-size:14px;
2. em 相对父元素字号
基准：当前元素父级的
font-size计算规则：
1em = 父元素font-size坑点：多层嵌套会叠加放大例：
body {font-size:16px;}
.box {font-size:2em; /* 32px */}
.box span {font-size:1.5em; /* 32 * 1.5 = 48px */}适用：内边距、文字间距跟随自身文字大小自适应
3. rem 相对根元素 html 字号（最推荐移动端）
基准：页面根标签
<html>的font-size，和父级无关r = root（根），只看最顶层，不会嵌套叠加 默认浏览器 html 字号：16px
1rem = 16px例：
html {font-size:16px;}
.box {font-size:2rem; /* 32px */}
.box span {font-size:1.5rem; /* 24px，不受父级影响 */}优势：统一控制全局缩放，做移动端适配首选
三者核心对比表
单位 | 参照物 | 类型 | 嵌套影响 | 适用场景 |
px | 屏幕像素 | 绝对 | 无 | 固定边框、阴影、小图标、固定高度 |
em | 父元素 font-size | 相对 | 层层叠加放大 | 文字内边距、行间距、跟随文字缩放 |
rem | html 根 font-size | 相对 | 不受父级影响 | 全局字体、页面布局、移动端自适应 |
补充实用知识点
移动端适配常用设置
html { font-size: 62.5%; }
/* 1rem = 10px，方便换算：2rem=20px、5rem=50px */特殊规则： width/height/padding/margin 使用 em/rem 同样按字号换算； 百分比 % 是相对父容器宽高，和这三者无关。
选择建议
固定不变尺寸 → px
跟随自身文字大小 → em
全局统一适配、响应式布局 → rem
扫一扫，关注我们
57