1. 什么是移动端适配？

移动端开发目前主要包括三类：

原生App开发（iOS、Android、RN、uniapp、Flutter等）
小程序开发（原生小程序、uniapp、Taro等）
Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）

2. 自适应和响应式

这里有两个概念：
 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小；
 响应式：会随着屏幕的实时变动而自动调整，是一种自适应；

3. 认识视口viewport

3.1. PC端的视口

在一个浏览器中，我们可以看到的区域就是视口（viewport）；
我们说过fixed就是相对于视口来进行定位的；
在PC端的页面中，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个；

3.2. 移动端的视口

布局的视口和可见的视口是不太一样的。
这是因为移动端的网页窗口往往比较小，我们可能会希望一个大的网页在移动端可以完整的显示；
所以在默认情况下，移动端的布局视口是大于视觉视口的；

所以在移动端，我们可以将视口划分为三种情况：

布局视口（layout viewport）
视觉视口（visual layout）
理想视口（ideal layout）
这些概念的区分，事实上来自ppk，他也是对前端贡献比较大的一个人（特别是在移动端浏览器）
https://www.quirksmode.org/mobile/viewports2.html

3.2.1 布局视口

布局视口（layout viewport）
默认情况下，一个在PC端的网页在移动端会如何显示呢？
- 第一，它会按照宽度为980px来布局一个页面的盒子和内容；
- 第二，为了显示可以完整的显示在页面中，对整个页面进行缩小；
我们相对于980px布局的这个视口，称之为布局视口（layout
viewport）；
布局视口的默认宽度是980px；

image.png

在移动端，一个100乘100的盒子，是在980宽的布局上放的盒子。它的100是相对于980的100.
默认的移动端浏览器，为了让这个980的布局视口完全显示在手机端里面，它会将这个980按照等比例缩小。缩小到我们能完全在浏览器上看到这个页面。里面的100乘100的盒子也是伴随着这个980一直缩小。

删除掉html里面的 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Document</title>
  </head>
  <style>
    .box {
      width: 900px;
      height: 900px;
      background-color: orange;
    }
  </style>
  <body>
    <div class="box"></div>
  </body>
</html>

image.png

设置900的宽度，基本占满了
整个页面大小是980*1338px

image.png

350/478=980/1338

3.2.2 视觉视口

视觉视口（visual viewport）

如果默认情况下，我们按照980px显示内容，那么右侧有一部分区域就会无法显示，所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中；
那么显示在可见区域的这个视口，就是视觉视口（visual viewport）

在Chrome上按shift+鼠标左键可以进行缩放。

image.png

3.2.3 理想视口

◼ 如果所有的网页都按照980px在移动端布局，那么最终页面都会被缩放显示。
 事实上这种方式是不利于我们进行移动的开发的，我们希望的是设置100px，那么显示的就是100px；我们写了个100乘100的盒子，就是让他相对于手机的逻辑像素。
你这个逻辑像素是350和478，我的100就是相对于350的100.但是实际上是但是在移动端，我设置的这个100是相对于视口布局980的100，而且还是缩小以后的。实际上变的很小很小了。

image.png

如何做到这一点呢？通过设置理想视口（ideal viewport）；

理想视口（ideal viewport）

默认情况下的layout viewport并不适合我们进行布局；
我们可以对layout viewport进行宽度和缩放的设置，以满足正常在一个移动端窗口的布局；
这个时候可以设置meta中的viewport；
image.png
布局视口的大小是可以修改的
一般html默认都有下面的标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
以上的标签只针对与移动端，对pc端是无效的。
width: 设置布局视口的宽度，在默认情况下，大多数移动端浏览器都是980.
如果content="width=2000px,
那么100的盒子就变得更小了。
一般不设置高度。
image.png
如果改成<meta name="viewport" content="width=350px, initial-scale=1.0" />
[图片上传失败...(image-601abb-1665209290905)]

差不多就是占视觉视口的三分之一了。
宽度是200px的时候，在200px布局上画一个100的盒子，然后200px的布局放大到整个视觉窗口。

image.png

宽度是100的时候，在100px布局上画一个100的盒子，然后100px的布局放大到整个视觉窗口。所以整个窗口都是盒子了。

image.png

如果手机是320px，那么我写的100希望是相对于这个320的100，
不希望你随便缩放，这个时候把布局视口设置成320就可以了
<meta name="viewport" content="width=device-width, initial-scale=1.0">
因为我们不知道用户屏幕宽度，所以直接写device-width设备宽度，不用写死就可以了。

当布局视口等于可视视口的时候，我们成为理想视口。

image.png

initial-scale是设备宽度与viewport大小之间的比例。网页会不会缩放。
设置为2的话。网页就会放大2倍。
设备宽度375，布局视口也是375。但是被放大了2倍。
就是设备只能看到175px的宽度，175以后要使用滚轮滑动来看。

为了不让用户手动缩放，一般还会增加user-scalable=no,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
width=device-width：布局视口等于设备的宽度。

有时候浏览器会忽略这个user-scalable这个时候我们需要添加另外两个属性，最大缩放比例和最小缩放比例。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

4. 移动端适配方案

移动端的屏幕尺寸通常是非常繁多的，很多时候我们希望在不同的屏幕尺寸上显示不同的大小；

比如我们设置一个100x100的盒子
✓ 在375px的屏幕上显示是100x100;
✓ 在320px的屏幕上显示是90+x90+;
✓ 在414px的屏幕上显示是100+x100+;
其他尺寸也是类似，比如padding、margin、border、left，甚至是font-size等等；

这个时候，我们可能可以想到一些方案来处理尺寸：
方案一：百分比设置；
✓ 因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一；
✓ 所以百分比在移动端适配中使用是非常少的；
方案二：rem单位+动态html的font-size；
方案三：vw单位；
方案四：flex的弹性布局；