px、em、rem、vw、vh、clamp 怎么选？

整理了一套单位使用规范，新手可以直接套用，不用再纠结怎么选，高效又避坑：

/* 1. 根字号：设置rem基准，避免浏览器差异 */html{font-size:16px;}/* 2. 字体：rem（全局统一）或 clamp（流体自适应） */body{font-size:1rem;}/* 全局基础字体 */h1{font-size:clamp(1.5rem,2vw+1rem,2.5rem);}/* 标题流体排版 *//* 3. 间距：rem为主，保证全局一致性，配合clamp做自适应间距 */.gap{gap:1rem;}.padding{padding:1.5rem;}.section-padding{padding:clamp(16px,5vw,24px);}/* 4. 布局宽度：%（局部适配）、vw、clamp（全局自适应） */.container{width:min(90vw,1200px);}/* 结合min更稳妥 */.child-box{width:50%;}/* 父级容器内的局部适配 *//* 5. 小固定值：px（精准不变） */border:1px solid #eee;/* 边框固定 */border-radius:4px;/* 圆角固定 */.icon-size{width:24px;height:24px;}/* 图标固定尺寸 *//* 6. 全屏布局：dvh（移动端）、vh（PC端） */.full-screen{min-height:100dvh;}/* 移动端全屏首选 */

总结：

1.固定尺寸用 px：边框、圆角、小图标、固定间距，精准不混乱；2.全局适配用 rem：字体、全局间距、布局，配合媒体查询改根字号，全站等比缩放；3.嵌套场景避 em：em 易累积，只用在简单局部适配，嵌套层级深的场景坚决不用；4.全屏/视口适配用 vw/vh+dvh：PC端用 vw/vh，移动端全屏用 dvh，避免高度跳动；5.流体排版用 clamp：字体、容器宽度、自适应间距，不用媒体查询，简洁又流畅；6.百分比慎用：记住“宽高相对父级、边距相对父级宽度”，父级无明确高度时，height:100%会失效。