简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 移动布局原理、实战手机页面的基本整体架构页眉,页脚,主体。
Blogger Information
Blog 20
fans 0
comment 0
visits 11505
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
移动布局原理、实战手机页面的基本整体架构页眉,页脚,主体。
愿情的博客
Original
394 people have browsed it

移动布局原理

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, 方便计算

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

```

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！