1. rem单位
| 项目 | 说明 |
|---|---|
| 概念 | 相对于根元素（html）的字体大小的单位 |
| 性质 | rem单位是相对单位 |
| 计算公式 | 1rem = html元素的font-size值 |
| 适配原理 | 通过修改html元素的font-size值，实现整个页面元素的等比例缩放 |
| 使用方法 | 1. 给HTML标签加字号；2. 使用rem单位书写尺寸；3. 通过媒体查询或JavaScript动态调整html的font-size |
| rem布局方案 | 将网页等分成10份，HTML标签的字号为视口宽度的1/10。示例：视口宽度320px→字号32px，375px→37.5px，414px→41.4px |
2. vw/vh单位
| 项目 | 说明 |
|---|---|
| 概念 | 视口宽度（vw）和视口高度（vh）的单位 |
| 定义 | 1vw = 视口宽度的1%，1vh = 视口高度的1% |
| 优势 | 直接基于视口尺寸，无需额外计算 |
| 使用场景 | 实现全屏布局、响应式字体大小、自适应元素尺寸 |
示例代码：
/* 使用vw单位 */
.container {
width: 100vw;
height: 100vh;
}
.box {
width: 50vw; /* 视口宽度的50% */
height: 25vh; /* 视口高度的25% */
font-size: 5vw; /* 字体大小为视口宽度的5% */
}
| 项目 | 说明 |
|---|---|
| vw布局步骤 | 1. 确定设计稿对应的vw尺寸（1/100视口宽度）：查看设计稿宽度 → 确定参考设备宽度 → 确定vw尺寸；2. 计算vw单位尺寸：vw单位的尺寸 = px单位数值 / (1/100视口宽度) |
应用示例：
/* 假设设计稿宽度为750px，参考设备宽度为375px */
/* 1vw = 3.75px (375px / 100) */
/* 计算29px对应的vw值：29 / 3.75 ≈ 7.73vw */
.element {
width: 7.73vw;
margin-left: 2.4vw;
padding: 1.33vw;
}
实际去写经常用媒体查询+px+百分比