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,2vw1rem,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移动端、vhPC端 */.full-screen{min-height:100dvh;}/* 移动端全屏首选 */总结1.固定尺寸用 px边框、圆角、小图标、固定间距精准不混乱2.全局适配用 rem字体、全局间距、布局配合媒体查询改根字号全站等比缩放3.嵌套场景避 emem 易累积只用在简单局部适配嵌套层级深的场景坚决不用4.全屏/视口适配用 vw/vhdvhPC端用 vw/vh移动端全屏用 dvh避免高度跳动5.流体排版用 clamp字体、容器宽度、自适应间距不用媒体查询简洁又流畅6.百分比慎用记住“宽高相对父级、边距相对父级宽度”父级无明确高度时height:100%会失效。