移动端布局的基本思路与三种视口之间的关系
移动布局原理
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`解决方案
DDR:设备像素比通常布局视图：980px 宽度:width视觉视图：以苹果11为例，375px 移动端表示：device-width解决方案：修改布局视图等于视觉视图 width = device-width初始化比例设置成1：initial-scale=1.0, 初始化时,布局视图/视觉视图=1: 也就是1比1，意思就是不会产生缩放，达到理想视图
4.操作步骤
- 布局视图 = 视觉视图: width = device-width
- 理想视图 = 视觉视图: initial-scale=1.0
- 布局单位不能使用 px 因为px与设备相关，使用主流单位
- 经典百分比,em,但目前主流单位是: rem + vw,也称”rem-vw决方案
5.布局前,必须先确定 1rem = ?, 1vw =?
第1步： 1vw = ?
- 选择某款手机做为理想视口的基础,如
iPhone11: 375px 100vw = 100% = 375px, 所以1vw = 3.75px
第2步： 1rem = ?
1rem默认为游览器字号16px- 推荐:
1rem = 100px 1rem不要在<html>中写死, 应该通过100vw计算出来
6.总结
| 序号 | 属性值 | 描述 |
|---|---|---|
| 1 | 1vw = 3.75px |
以iPhone6/11屏幕宽度为基准 |
| 2 | 1rem = 100vw / 3.75 |
即1rem = 100px, 方便计算 |
7.推荐 vscode 插件自动换算
- 名称:
px to rem & rpx,原名为cssrem - 自动将
px换算为rem - 须在插件中设置
1rem = ...px,默认为16px,通常设置为1rem=100px以方便计算
