1. CSS长度单位全面解析
作为一名前端开发者，每天打交道最多的就是CSS样式了。而CSS中最基础却又最容易被忽视的，就是各种长度单位的选择。记得我刚入行时，曾经因为不理解em和rem的区别，导致整个页面的字体大小完全失控，那场景简直惨不忍睹。
1.1 为什么需要多种长度单位
CSS提供了十几种长度单位，每种单位都有其特定的使用场景。比如：
- 像素(px)适合精确控制元素尺寸
- em/rem适合构建响应式布局
- vw/vh适合全屏适配
- %适合相对父元素的尺寸控制
理解这些单位的差异，能让我们在开发时做出更合理的选择，避免很多布局问题。
2. 绝对长度单位详解
2.1 像素(px)单位
像素是最常用的绝对单位。在CSS中，1px被定义为1/96英寸。但在实际设备上，由于屏幕DPI不同，1px的物理尺寸会有差异。
css复制.box {
width: 200px; /* 固定200像素宽度 */
height: 100px; /* 固定100像素高度 */
}
注意：在高DPI设备上，浏览器会自动进行像素缩放，保证视觉大小一致。
2.2 其他绝对单位
虽然不常用，但CSS还支持以下绝对单位：
- cm(厘米)：1cm ≈ 37.8px
- mm(毫米)：1mm ≈ 3.78px
- in(英寸)：1in = 96px
- pt(磅)：1pt ≈ 1.333px
- pc(派卡)：1pc = 16px
这些单位更适合打印样式表，在屏幕显示中很少使用。
3. 相对长度单位详解
3.1 em单位
em是相对于当前元素的字体大小。如果用于font-size属性，则继承父元素的字体大小；如果用于其他属性，则基于自身字体大小。
css复制.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 24px (16×1.5) */
padding: 2em; /* 48px (24×2) */
}
经验：em单位在多层嵌套时容易产生"雪球效应"，使用时需特别注意。
3.2 rem单位
rem(root em)相对于根元素(html)的字体大小，不受父元素影响，更易于控制。
css复制html {
font-size: 10px;
}
.box {
font-size: 1.6rem; /* 16px */
width: 30rem; /* 300px */
}
3.3 百分比单位
百分比是相对于父元素的对应属性值。
css复制.container {
width: 800px;
}
.item {
width: 50%; /* 400px */
}
注意：对于position: absolute的元素，百分比是相对于最近的定位祖先元素。
4. 视口相关单位
4.1 vw和vh单位
1vw = 视口宽度的1%，1vh = 视口高度的1%。
css复制.header {
height: 10vh; /* 视口高度的10% */
width: 100vw; /* 视口宽度的100% */
}
4.2 vmin和vmax单位
vmin取vw和vh中的较小值，vmax取较大值。
css复制.box {
width: 50vmin; /* 视口较小尺寸的50% */
height: 70vmax; /* 视口较大尺寸的70% */
}
5. 特殊用途单位
5.1 ex和ch单位
ex基于当前字体的x字母高度，ch基于"0"字符的宽度。这些单位在特定排版场景很有用。
css复制.text {
height: 3ex; /* 3倍x字母高度 */
width: 20ch; /* 20个0字符宽度 */
}
5.2 计算单位calc()
calc()允许在CSS中进行基本数学运算，可以混合使用不同单位。
css复制.container {
width: calc(100vw - 200px);
height: calc(100vh - 10rem);
}
6. 单位选择实战指南
6.1 响应式布局单位选择
- 字体大小：优先使用rem，配合媒体查询调整根字体
- 间距和尺寸：混合使用rem和vw/vh
- 固定元素：适当使用px
6.2 常见问题解决方案
问题1：移动端1px边框过粗
css复制.border {
border: 0.5px solid #ccc; /* 部分设备支持 */
}
/* 更好的解决方案 */
.border {
position: relative;
}
.border::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: #ccc;
transform: scaleY(0.5);
}
问题2：rem布局根字体设置
css复制/* 推荐设置 */
html {
font-size: 62.5%; /* 10px */
}
@media (min-width: 768px) {
html {
font-size: 75%; /* 12px */
}
}
7. 单位转换技巧
7.1 px转rem的Sass函数
scss复制@function rem($px) {
@return ($px / 16) * 1rem;
}
.box {
width: rem(200); /* 12.5rem */
}
7.2 视口单位兼容方案
css复制.box {
height: 50vh;
height: calc(var(--vh, 1vh) * 50);
}
/* JS补充 */
function setVhUnit() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
window.addEventListener('resize', setVhUnit);
setVhUnit();
8. 性能优化建议
- 避免过度使用calc()，特别是在动画中
- vw/vh单位的变化会触发重排，谨慎使用
- 预处理器生成的rem值会增加CSS体积
在实际项目中，我通常会建立一个单位的规范：
- 间距使用rem
- 字体使用rem
- 容器宽度使用%或vw
- 固定尺寸元素使用px
- 特殊效果使用vmin/vmax
这种混合使用的方案既能保证响应式，又能保持代码的可维护性。