移动布局原理、实战手机页面的基本整体架构页眉,页脚,主体。

16lz 2022-04-10

移动布局原理

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 插件

名称: px to rem & rpx,原名为cssrem
自动将px换算为rem
须在插件中设置1rem = ...px,默认为16px,通常设置为1rem=100px以方便计算

5. 操作步骤

布局前,必须先确定 1rem = ?, 1vw =?

5.1 `1vw = ?`

选择某款手机做为理想视口的基础,如iPhone11: 375px
100vw = 100% = 375px, 所以 1vw = 3.75px

5.2 `1rem = ?`

1rem 默认为游览器字号16px
推荐: 1rem = 100px
1rem不要在<html>中写死, 应该通过100vw计算出来

5.3 总结

序号	属性值	描述
1	`1vw = 3.75px`	以`iPhone6/11`屏幕宽度为基准
2	`1rem = 100vw / 3.75`	即`1rem = 100px`, 方便计算

实战手机页面的基本整体架构页眉,页脚,主体

```

更多相关文章

随机推荐