【前端基础】1 - 15 移动端适配
§1-15 移动端适配
1-15.1 屏幕分辨率与视口标签
当今，移动互联网发展十分成熟。每天，有不少网民使用移动设备访问互联网。网页针对移动设备的适配显得尤为必要。移动设备与 PC 端最显著的特点之一就是设备屏幕尺寸的不同，进而导致屏幕分辨率的不同。
一般而言，所编写的 HTML 文档在 PC 端查看最佳，但在移动端查看效果欠佳。首先要解决的问题就是设备分辨率不同所导致的浏览器视口尺寸不同。
但在同一设备下，相同分辨率但不同的缩放尺寸也会导致网页显示出现意外情况。为解决这一问题，我们一般考虑使用逻辑分辨率设计网页元素，而不是设备的物理分辨率（硬件分辨率）。
HTML 的 <meta> 元数据标签中的视口属性为我们提供了适配不同屏幕尺寸的解决方案。在 HTML 文档的 <head> 标签内添加：
<!-- 快捷输入方式 meta:vp -->
<!-- 视口标签，使用设备尺寸宽度（逻辑分辨率），初始缩放 1.0 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这样，在不同设备上，文档 <html> 标签的宽度将会有所不同。
1-15.2 设备模拟器与二倍图
如何查看不同设备上网页的宽度呢？开发人员工具中的设备仿真可以实现模拟不同设备访问网页的效果。
打开浏览器的开发人员工具，按下组合键 Ctrl + Shift + M 或点击 切换设备仿真（Microsoft Edge）、显示/隐藏设备工具栏（Google Chrome）、响应式设计模式（Mozilla Firefox）。一旦启用，就能看到现在正在模拟的设备、设备尺寸、缩放比例。
在这里，可以选择使用不同的设备模拟，查看该设备访问网页时网页元素的显示效果。
考虑到在不同尺寸设备上显示的问题，为防止图片在高分辨率屏幕上模糊失真，常常会使用二倍图设计。
二倍图是设计稿里每个元素尺寸的倍数。
现阶段，大多数设计稿参考 iPhone6/7/8 的逻辑分辨率（375 * 667）设计二倍图，也就是说，设计稿的宽度为 750（设备的物理分辨率为 750 * 1334）。
制作网页时，应当参考设备的逻辑分辨率。
| 手机型号 | 物理分辨率 | 逻辑分辨率 | 比例关系 |
|---|---|---|---|
| iPhone 3GS | 320 * 480 | 320 * 480 | 1 : 1 |
| iPhone 4 | 640 * 960 | 320 * 480 | 2 : 1 |
| iPhone 5 | 640 * 1136 | 320 * 568 | 2 : 1 |
| iPhone 6/7/8 | 750 * 1334 | 375 * 667 | 2 : 1 |
| iPhone 6/7/8 Plus | 1080 * 1920 | 414 * 736 | 2.6 : 1 |
| iPhone 11 Pro/X/XS | 1125 * 2436 | 375 * 812 | 3 : 1 |
| iPhone 11/XR | 828 * 1792 | 414 * 896 | 2 : 1 |
| iPhone 11 Pro Max/XS Max | 1242 * 2688 | 414 * 896 | 3 : 1 |
| iPhone 12 mini | 1080 * 2340 | 360 * 780 | 3 : 1 |
| iPhone 12/iPhone 12 Pro | 1170 * 2532 | 390 * 844 | 3 : 1 |
| iPhone 12 Pro Max | 1284 * 2778 | 428 * 926 | 3 : 1 |
1-15.3 适配方案简述
在为 PC 端设计网页时，我们通常采用的是宽度适配的方案。网页宽度会根据设备的宽度自适应。这种适配方案有两种实现：
- 百分比布局；
- Flex 弹性布局；
但在移动端中，仅在宽度实现自适应是不够的。为了保证在不同尺寸的设备上都具有良好的显示效果，应当考虑使用等比适配，使得网页中的元素宽高等比缩放。我们会使用媒体查询、rem 或 vw 实现等比适配。
1-15.3.1 rem 简介与基本使用
rem 是一个单位，且是一个相对单位，它按照 HTML 标签的字体字号计算元素大小。如 1rem 即 1 HTML 字号大小。
默认情况下，HTML 字号大小为 16px。可通过 CSS 修改 HTML 字号，进而调节元素的大小。
示例：
<div class="test"></div>
html {
font-size: 25px;
}
.test {
margin: 1rem auto;
width: 5rem;
height: 3rem;
background-color: pink;
border-radius: 10px;
}
在浏览器中打开页面，并启用设备模拟，模拟在不同尺寸设备中元素的表现。
但这种方法仍然有缺陷，由于 HTML 字号被硬编码，在大尺寸设备中该元素可能显得过小。
1-15.3.2 rem 结合媒体查询
不同的移动设备的屏幕尺寸有所不同。可以使用媒体查询，根据当前用户设备的屏幕尺寸有条件地适用不同的 CSS 样式。
媒体查询用法：
@media (condition) {
selector {
/* CSS code */
}
}
示例：根据不同尺寸屏幕，设置不同的背景以便调试。
@media (width: 320px) {
body {
background-color: red;
}
}
@media (width: 375px) {
body {
background-color: green;
}
}
@media (width: 414px) {
body {
background-color: blue;
}
}
使用媒体查询可根据不同的条件设置差异化的 CSS 样式。可利用媒体查询，针对不同尺寸设备设置不同的 HTML 字号。
适配大小：一般而言，设备宽度大，元素尺寸大；设备宽度小，元素尺寸小。将网页等分为十份，让 HTML 标签字号是当前视口宽度的 1/10。
示例：根据不同视口宽度，结合 rem 等比缩放元素尺寸。
<div class="box"></div>
@media (width: 320px) {
html {
font-size: 32px;
}
}
@media (width: 375px) {
html {
font-size: 37.5px;
}
}
@media (width: 414px) {
html {
font-size: 41.4px;
}
}
.box {
margin: 1rem auto;
width: 5rem;
height: 3rem;
background-color: pink;
border-radius: 10px;
}
但是这种方法仍有缺陷。不同设备的宽度并不一致，单独为不同宽度的设备设置一个媒体查询并不现实。
1-15.3.3 Flexible.js 与 rem
Flexible.js 是手机淘宝开发的用于适配移动端的 JS 库，核心原理是根据不同的视口宽度给网页中的 HTML 标签设置不同的字号。
使用方法：在 <body> 最后使用 <script> 引入。
<body>
<div class="box"></div>
<script src="./js/flexible.js"></script>
</body>
使用 Flexible.js 可避免针对不同设备尺寸反复编写媒体查询的弊端。在实际开发中，也尽量使用 rem 响应式设计，尽量避免使用 px。
实际开发时，根据设计稿给出的视口宽度，计算出设计稿中的 HTML 标签字号大小，进而得出 rem 数值。
rem 尺寸 = 像素尺寸 / HTML 基准根字号;
但这会涉及到繁复的除法运算，并不方便。
1-15.3.4 Less
使用 Less 预处理器可以解决在设计稿中频繁切换像素单位时的计算问题。Less 是一个 CSS 预处理器，文件后缀为 .less，具备 CSS 所不具备的计算和逻辑能力，其写法类似于 CSS，更为方便。
但浏览器本身并不支持 Less，使用时还需要将 Less 转换为 CSS 才能使用。在 Visual Studio Code 中，安装插件 Easy LESS，该插件会自动生成对应的 CSS 文件。
语法：
// 单行注释：单行注释并不会出现在 CSS 中，因为单行注释不受 CSS 支持
/*
块注释
*/
selector {
/* CSS code */
}
运算：
/*
运算：加、减、乘直接书写表达式，除法需要添加 () 或 .
除法运算推荐使用 () 包围。
当存在多个单位时，以第一个单位为最终单位
*/
.box {
width: 100 + 50px;
height: 5 * 32px;
width: (100 / 4px);
height: 100 ./ 4px;
}
嵌套：可用于快速生成后代选择器
parent_selector {
/* parent element style */
child_selector {
/* child element style */
}
}
嵌套使用 & 配合使用伪类或结构伪类
element {
/* element style */
/* 表示该元素的 hover 状态，即 element:hover */
&:hover {
/* hover style */
}
}
变量：使用 Less 变量存储数据，便于修改、调用
// variable definition
@varName: varVal;
@defaultColor: #333;
// Use variable
.box {ad
}
导入：向外部导入 Less，若为 less 文件可省略后缀
@import "url";
@import "./less/base.less";
@import "./less/common";
导出：控制 less 文件导出的 CSS 文件路径和名称z
导出语句必须在文件的首行。
// out: url
// 控制导出的 CSS 文件到指定 URL
// 导出的文件默认与 LESS 文件同名
也可以禁用导出：
// out: false
1-15.3.5 vw 和 vh 简介
另一对相对单位是 vw 和 vh，二者份别基于视口的宽度（viewport width）和高度（viewport height）计算尺寸。
1 vw 为视口宽度的 1%，1 vh 为视口高度的 1%。使用 vw 和 vh 也能实现移动端等比缩放适配效果，无需使用媒体查询。
适配大小：vw 单位尺寸 = 像素单位尺寸 / （1% 视口宽度尺寸），vh 单位尺寸 = 像素单位尺寸 / （1% 视口高度尺寸）。
注意：实际开发中 vw 和 vh 不可混用，考虑到全面屏高度尺寸大，混用可能导致元素变形。一般考虑使用 vw。
