【前端】- 移动端布局

ltmuxin
2023-07-11 / 0 评论 / 23 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2024年02月28日,已超过109天没有更新,若内容或图片失效,请留言反馈。
code here...

教学内容

移动布局原理

1. 重要术语

(1) 术语

序号名称描述
1像素图像显示最小单位,PPI(像素分辨率)
2DPR设备像素比 = 设备像素 / 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" />

序号属性值描述
1width=device-width布局视图 = 视觉视图
2initial-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 总结

序号属性值描述
11vw = 3.75pxiPhone6/11屏幕宽度为基准
21rem = 100vw / 3.751rem = 100px, 方便计算
0

评论 (0)

取消