1. 什么是移动端适配

两个概念

• 自适应：根据不同的设备屏幕大小来自动调整尺寸，大小。
• 响应式：会随着屏幕的实时变动而自动调整，是一种自适应。

2. 理解视口viewport

2.1 PC端的视口

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

2.2 移动端的视口

在移动端，不太一样，你布局的视口和你可见的视口是不太一样的。

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

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

1. 布局视口 (layout viewport)
2. 视觉视口 (visual layout)
3. 理想视口 (ideal layout)

2.2.0 PC端的网页在移动端显示的问题

1
2
3
4
5

.box{
  width: 100px;
  height: 100px;
  background-color: #c2d873;
}

1

<div class="box"></div>

PC端显示：

移动端显示：

我们会发现同样的100X100px的盒子在移动端显示确很小，没有显示真正的100x100px，这是因为PC端的页面为了完全展示在移动端，整个页面同比例缩小显示了。

这些问题就要讲一些视口概念了。

2.2.1 布局视口

默认情况下，PC端的网页在移动端会如何显示？

我们相对于980px布局的这个视口，称之为布局视口(layoutviewport)

布局视口的默认宽度是980px

所以我们没有对项目移动端适配的话 在手机打开是会将项目同比例缩小。

2.2.2 视觉视口 (visual viewport)

默认情况下，我们按照980px显示内容，那么右侧有一部分区域就会无法显示，所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中。

那么显示在可见区域的这个视口，就是视觉视口 (visual viewport)。

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

2.2.3 理想视口 (ideal layout)

如果所有的网页都按照980px在移动端布局，那么最终页面都会被缩放显示。

事实上这种方式是不利于我们进行移动端开发的，我们希望的是设置100px，那么显示的就是100px。

如何做到这一点呢？通过设置理想视口 (ideal viewport)

理想视口就是布局视口 === 视觉视口

反着说就是布局视口 === 视觉视口就是理想视口

可以通过meta标签设置布局视口：

1
2

<!-- width: 设置布局视口的宽度 device-width是获取用户设备的宽度 -->
<meta name="viewport" content="width=device-width">

还可以设置别的meta中的viewport参数：

开发的时候一般都这样写：

1
2
3
4
5
6
7

<!-- 
initial-scale=1.0  一般都是1.0
user-scalable=no  不可以缩放（可能有些浏览器不支持，可以结合下面）
minimum-scale=1.0, maximum-scale=1.0  这两个结合在一起就是不可以缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,
  user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

淘宝网也是这样写法的。

3. 移动端适配方案

现在想在移动端的效果就是根据设备的尺寸，文本和盒子会响应式放大缩小。

3.1 适配方案理解

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

• 比如我们设置一个100x100的盒子
• 在375px的屏幕上显示是100x100;
• 在320px的屏幕上显示是90+x90+;
• 在414px的屏幕上显示是100+x100+;

其他尺寸也是类似，比如padding、margin、border、left，甚至是font-size等等。

有4个方案来处理尺寸：

1. 方案一：百分比设置（基本不用了解即可）

   • 因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一
   • 所以百分比在移动端适配中使用是非常少的

2. 方案二：rem单位+动态html的font-size
   还不了解rem等单位可以去先了解CSS布局单位%，px，em，rem，vh/wh。
   

   这里我们通过每个不同的屏幕设置不同的根元素(html)的font-size的尺寸，然后用rem计算出尺寸。来达到响应式的效果。

3. 方案三：vw单位
   这种方案就不用设置根元素的font-size。因为vw本身就是相对于视口的单位。
   

4. 方案四：flex的弹性布局
   

4. 适配方案实现方式

4.1 rem单位+动态html的font-size（方案一）

rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。

在开发中，我们只需要考虑两个问题：

1. 问题一：针对不同的屏幕，设置html不同的font-size;
2. 问题二：将原来要设置的尺寸，转化成rem单位;

这种方案有三种方式实现。

4.1.1 第一种方式：媒体查询

可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
  /* 媒体查询 */
  @media screen and (min-width:320px) {
    html {
      font-size: 20px;
    }
  }
  @media screen and (min-width:375px) {
    html {
      font-size: 24px;
    }
  }
  @media screen and (min-width:414px) {
    html {
      font-size: 28px;
    }
  }
  @media screen and (min-width:480px) {
    html {
      font-size: 32px;
    }
  }

  .box {
    width: 5rem;
    height: 5rem;
    color: #fff;
    background: #2660e8;
  }
</style>

<div class="box">
  <p>前端</p>
</div>

@media screen and开头的语句就是媒体查询语句。
@media后面是一个或者多个表达式，如果表达式为真，则应用样式。
@media screen and (min-width:320px) 这句话的意思就是：设备宽度小于320就选中这个样式。

媒体查询的缺点：

1. 我们需要针对不同的屏编写大量的媒体查询
2. 如果动态改变尺寸，不会实时的进行更新

4.1.2 用js动态获取设备宽度

如果希望实时改变屏幕尺寸时，font-size也可以实时更改，可以通过js代码。

方法：

1. 根据html的宽度计算出font-size的大小，并且设置到html上
2. 监听页面的实时改变，并且重新设置font-size的大小到html上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script>
  // 1.获取html的元素
  const htmlEl = document.documentElement

  function setRemUnit() {
    // 2.获取html的宽度(视口的宽度)
    const htmlWidth = htmlEl.clientWidth
    // 3.根据宽度计算一个html的font-size的大小
    const htmlFontSize = htmlWidth / 10
    // 4.将font-size设置到html上
    htmlEl.style.fontSize = htmlFontSize + "px"
  }
  // 保证第一次进来时, 可以设置一次font-size
  setRemUnit()

  // 当屏幕尺寸发生变化时, 实时来修改html的font-size
  window.addEventListener("resize", setRemUnit)
  //跳转的页面计算一下
  window.addEventListener("pageshow",function(e) {
    if(e.persisted) {
      setRemUnit()
    }
  })
</script>
<style>
  .box {
    width: 5rem;
    height: 5rem;
    background: #8ec04c;
  }
  p {
    font-size: 0.5rem;
  }
</style>

<div class="box">
  <p> 前端</p>
</div>

默认font-size:16px，所以一开始不用设置。

效果：

这样就可以实时响应式了。

4.1.3 利用第三方库lib-flexible动态font-size

下载地址：GitHub - amfe/lib-flexible: 可伸缩布局方案

核心代码和上面写js是差不多的，主要他处理一些别的情况，比如屏幕是否支持0.5px，还有页面跳转问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script src="./js/lib_flexible.js"></script>

<style>
  .box {
    width: 5rem;
    height: 5rem;
    background-color: orange;
  }

  p {
    font-size: 0.5rem;
  }
</style>

<div class="box">
  <p>我是文本</p>
</div>

效果一样的：

4.1.4 rem单位-px转成rem的方案

上面我们已经解决了动态生成font-size了，但是我们要把px转成rem。

375px的屏幕font-size就是37.5，100px宽的盒子就是100除以37.5。每一次都要运算。这就很麻烦。

4.1.5 第一种：手动用计算器算（不推荐）

• 比如有一个在375px屏幕上，100px宽度和高度的盒子
• 我们需要将100px转成对应的rem值：
• 100/37.5=2.6667，其他也是相同的方法计算即可

4.1.6 第二种用less的混合scss的函数

1
2
3
4
5
6
7
8
9
10
11
12
13

.pxToRem(@px) {
  result: 1rem * (@px / 37.5);
}

.box {
  width: .pxToRem[100](result);
  height: .pxToRem[100](result);
  background-color: orange;
}

p {
  font-size: .pxToRem[14](result);
}

这种比上面的方便很多，但是也不是很好。要写很多的函数名。

4.1.8 第四种：VSCode插件

px to rem的插件，在编写时自动转化。

然后直接打100px就可以看得到，然后选rem就可以了。就不用直接算了。

4.2 vw单位（方案二）

vw单位是相对于视口的。比如375px的屏幕就是1vw==3.75px。

基于375屏幕：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
  /* 设置给375px的设计稿 */
  /* 1vw = 3.75px */
  .box {
    /* width: 100px / 3.75px = 26.6667vw */
    width: 26.6667vw;
    height: 26.6667vw;
    background: #8ec04c;
  }

  p {
    font-size: 3.2vw;
  }
</style>

<div class="box">
  <p> 前端</p>
</div>

效果一样的：可以从计算样式那里看到width和font-size都是动态的。

在flexible GitHub上已经有写过这样的一句话：

由于 viewport 单位得到众多浏览器的兼容， lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来代替代此方。

所以它更推荐使用viewport的两个单位vw、vh。

vw的兼容性如何？

总体来说是不错的。

4.2.1 vw和rem的对比

• rem事实上是作为一种过渡的方案，它利用的也是vw的思想

  • 前面不管是我们自己编写的js，还是flexible的源码
  • 都是将1rem等同于设计稿的1/10，在利用1rem计算相对于整个屏幕的尺寸大小
  • 思考一下，1vw不是刚好等于屏幕的1/100
  • 而且相对于rem还更加有优势

• vw相比于rem的优势：

1. 优势一：不用去计算html的font-size大小，也不需要给html设置这样一个font-size
2. 优势二：不会因为设置html的font-size大小，而必须给body再设置一个font-size，防止继承
3. 优势三：因为不依赖font-size的尺寸，所以不用担心某些原因html的font-size尺寸被篡改，页面尺寸混乱
4. 优势四：vw相比于rem更加语义化，1vw刚好是1/100的viewport的大小
5. 优势五：可以具备rem之前所有的优点

4.2.2 vw的单位换算

第一种：手动换算

比如有一个在375px屏幕上，100px宽度和高度的盒子，我们需要将100px转成对应的vw值：
100/3.75=26.667，其他也是相同的方法计算即可。

第二种：less/scss函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@vwUnit:3.75;

.pxToVw(@px) {
  result: 1vw * (@px / @vwUnit);
}

.box {
  width: .pxToVw[100](result);
  height: .pxToVw[100](result);
  background-color: orange;
}

p {
  font-size: .pxToVw[14](result);
}

第三种：postcss-px-to-viewport

和rem一样，在前端的工程化开发中，我们可以借助于webpack的工具来完成自动的转化。postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。

安装插件：npm i postcss-px-to-viewport -D

下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。

1
2
3
4
5
6
7
8

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

viewportWidth的值根据自己的设计稿填写，还有很多配置想看文档配置，比如哪些类不转换vw等等。

第四种：VSCode插件

px tovw 的插件，在编写时自动转化。

这样就可以转换了。