# 教学内容
## 移动布局原理
### 1. 重要术语
(1) 术语
| 序号 | 名称 | 描述 |
| ---- | ---- | -------------------------------------- |
| 1 | 像素 | 图像显示最小单位,PPI(像素分辨率) |
| 2 | DPR | 设备像素比 = 设备像素 / CSS 像素 |
| 3 | 视口 | 可视窗口 viewport,分布局/视觉/理想三类 |
### 2. 三种视口描述
> 三种视口类型是人为的划分
| 序号 | 名称 | 描述 |
| ---- | ------------------------- | ---------------------------------------------- |
| 1 | 布局视口`Layout viewport` | 设备无关, 通常默认`980px`,显示完整网页 |
| 2 | 视觉视口`visual viewport` | 设备相关,用户手机屏幕可见部分,通过缩放查看全部 |
| 3 | 理想视口`idea viewport` | 不必缩放就可查看全部,针对移动端进行布局 |
### 3. 解决方案
视口属性:`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
| 序号 | 属性值 | 描述 |
| ---- | -------------------- | ------------------- |
| 1 | `width=device-width` | 布局视图 = 视觉视图 |
| 2 | `initial-scale=1.0` | 视觉视图 = 理想视图 |
> 移动端布局单位很多,经典的百分比,em 等,但目前主流单位是: `rem + vw`,也称"rem-vw`解决方案
### 4. 推荐 vscode 插件
1. 名称: `px to rem & rpx`,原名为`cssrem`
2. 自动将`px`换算为`rem`
3. 须在插件中设置`1rem = ...px`,默认为`16px`,通常设置为`1rem=100px`以方便计算
### 5. 操作步骤
> 布局前,必须先确定 1rem = ?, 1vw =?
#### 5.1 `1vw = ?`
1. 选择某款手机做为理想视口的基础,如`iPhone11: 375px`
2. `100vw = 100% = 375px`, 所以 `1vw = 3.75px`
#### 5.2 `1rem = ?`
1. `1rem` 默认为游览器字号`16px`
2. 推荐: `1rem = 100px`
3. `1rem`不要在`<html>`中写死, 应该通过`100vw`计算出来
#### 5.3 总结
| 序号 | 属性值 | 描述 |
| ---- | --------------------- | ---------------------------- |
| 1 | `1vw = 3.75px` | 以`iPhone6/11`屏幕宽度为基准 |
| 2 | `1rem = 100vw / 3.75` | 即`1rem = 100px`, 方便计算 |
