移动端适配
00:00
rem、vw、vh、clamp
1. 适配单位
| 单位 | 参照物 | 特点 |
|---|---|---|
rem | 根元素字体大小 | 全局缩放 |
em | 父元素字体大小 | 局部缩放 |
vw | 视口宽度 1% | 响应视口 |
vh | 视口高度 1% | 响应视口 |
vmin | 视口较小边 1% | 适配短边 |
2. rem 适配
html {
font-size: 62.5%;
} /* 1rem = 10px */
body {
font-size: 1.6rem;
} /* 16px */3. vw 适配
/* 设计稿 375px，元素 100px → 100/375*100 = 26.67vw */
.element {
width: 26.67vw;
}4. clamp() 函数
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
.container {
width: clamp(300px, 80vw, 1200px);
}5. 安全区域与1px边框
.header {
padding-top: env(safe-area-inset-top);
}
.border-1px::after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background: #ccc;
transform: scaleY(0.5);
}6. dvh 单位
.full-screen {
height: 100dvh;
} /* 动态视口高度，解决移动端 vh 问题 */