CSS长度单位详解
在网页开发（CSS）中，长度单位决定了元素的大小、间距和布局方式。选择合适的单位对于实现响应式设计（适配不同屏幕尺寸）和可访问性（适应用户字体偏好）至关重要。
以下是 px、%、em、rem、vw、vh 这六种常用单位的详细介绍。
1. px (Pixel – 像素)
定义：绝对长度单位，代表屏幕上的一个物理像素点。
特点：
- 固定不变：不会随父元素大小或用户字体设置的变化而变化
- 精确控制：适合需要严格像素级对齐的场景（如边框粗细、图标大小）
2. % (Percentage – 百分比)
定义：相对长度单位，相对于父元素的对应属性值计算。
特点：
- 参照物多变：
width/height：相对于父元素的宽高font-size：相对于父元素的字体大小margin/padding：水平和垂直方向都相对于父元素宽度
- 流动性强：非常适合流体布局
3. em
定义：相对长度单位，相对于当前元素的字体大小。
特点：
- 累积效应：嵌套使用 em 会导致字体大小累乘放大或缩小
4. rem (Root Em)
定义：相对长度单位，相对于根元素<html>的字体大小。
特点：
- 无累积效应：嵌套使用时1 rem 始终等于根元素的字体大小
- 全局可控：修改
<html>的 font-size 会导致页面的比例尺变化 - 无障碍友好：尊重用户的浏览器默认字体设置
- 现代开发首选：目前移动端适配和组件库开发中最常用的单位
5. vw & vh (Viewport Width & Height – 视窗宽度/高度)
定义：视口相对单位，相对于浏览器可视窗口的大小
特点：
- 独立层级：直接锚定视窗尺寸
- 全屏布局：常用于制作全屏海报或保持元素在屏幕特定位置
6.使用建议
- 字体大小：常用 rem
- 布局宽度：
- 容器宽度常用 % 或 max-width 配合 rem
- 全屏区块常用 vw / vh
- 间距：
- 组件内部间距常用 em
- 页面布局间距常用 rem