什么是移动端适配？移动端适配的方案有哪些？-JXin的博客

温馨提示

该文章距离上次更新已经过去了 967 天，文章内容可能已经过时。

什么是移动端适配？
移动端适配方案
适配相关的第三方库
- hotcss
- lib-flexible

什么是移动端适配？

移动端适配指的是让网页在任意机型的手机浏览器中显示都是正常的

例如：在iPhone6设备中，如果想让一个元素占满，那个就要设置这个元素的宽度为375px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .wrap {
        width: 375px;
        height: 200px;
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <div class="wrap"></div>
  </body>
</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

移动端适配

可以看到现在元素刚好占满整行，但是如果切换到iPhone6Plus设备上，由于iPhone6Plus的CSS像素宽度为414px，所以如果元素设置宽度为375px就没办法占满整行，而移动端适配就是为了解决这个问题

移动端适配

移动端适配方案

常用的移动端适配方案有5种，分别是：

百分比适配
viewport缩放适配
DPR缩放适配
rem适配
vw、vh适配

百分比适配

百分比适配就按照百分比值来设置元素的宽高，例如上面的例子，可以把375px改成100%，这样无论在什么适配上，元素都会占满整行

.wrap {
	width: 100%;
	height: 200px;
	background-color: aquamarine;
}

1
2
3
4
5

移动端适配

百分比适配是最常见也是最简单的适配方案，但是一般来说百分比适配都需要和其它适配方案搭配使用，不会整个网页都使用百分比适配

viewport缩放适配

viewport缩放适配的原理就是把所有机型的CSS像素设置成一样的

例如：
iPhone6的CSS像素为375px，iPhone6Plus的CSS像素为414px，如果我们就想以iPhone6设备为模板，也就是让宽度为375px去写网页，那么就要让iPhone6Plus设备上的网页缩放成和iPhone6一样，这时候我们就要去计算缩放比，也就是414/375=1.104，接着设置meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.104, maximum-scale=1.104, minimum-scale=1.104, user-scalable=no"/>

移动端适配

可以看到宽度设置为375px时在iPhone6Plus设备上显示也是正常的，这是因为浏览器缩放了

但是会发现一个问题，如果再换一个设备，那么页面显示又不正常了，例如回到iPhone6机型上，出现了滚动条

移动端适配

这是因为设备宽度不一样，缩放比也是不一样的，所以这个缩放比应该根据当前的设备宽度来动态计算，计算公式如下：

(function () {
	const curWidth = document.documentElement.clientWidth; // 获取当前设备宽度
	const tarWidth = 375; // 网页设计的模板宽度
	const scale = curWidth / 375; // 计算出缩放比
	const view = document.querySelector("meta[name=viewport]"); // 获取meta标签
	view.content = `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`;
})();

1
2
3
4
5
6
7

viewport适配虽然看起来解决了问题，但是还有一些缺点：

由于设置的模板宽度是一样的，所以所有的手机看网页都是这个宽度，这样一些大屏幕的手机就失去了意义
计算出来的缩放比可能会有小数，会存在一些误差
对设计稿的测量存在问题

DPR缩放适配

DPR缩放适配的原理就是把CSS像素缩放成和设备像素一样

(function () {
	const scale = 1 / window.devicePixelRatio;
	const view = document.querySelector("meta[name=viewport]"); // 获取meta标签
	view.content = `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`;
})();

1
2
3
4
5

移动端适配

可以看到在iPhone6设备上，CSS像素宽度变成了750px，但是我们在切换成别的设备后，例如iPhone6Plus，仍然会出现适配问题，实际上DPR缩放适配的意义是实现开发者和设计者的像素统一，因为设计者都是按照750px来设计的（设计者只有设备像素宽度，没有CSS像素宽度），通过DPR缩放之后，设计稿是多少，我们就能写多少

rem适配

rem全称font size of the root element，是CSS3中新增的一个相对单位，是指相对于根元素的字体大小的单位

例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.104, maximum-scale=1.104, minimum-scale=1.104, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Document</title>
    <style>
      :root {
        font-size: 10px;
      }
      * {
        padding: 0;
        margin: 0;
      }
      .wrap {
        width: 20rem;
        height: 20rem;
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <div class="wrap"></div>
  </body>
</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

设置根元素的字体大小为10px，之后设置元素的宽高为20rem

rem适配

可以看到元素的宽高都为200px，所以rem单位是根据根元素字体大小来缩放的，宽高设置为20rem，也就是 20 x 10px（字体大小） = 200px

rem适配的原理：就是把所有的设备都分成相同的若干份，再计算元素宽度所占的份数

例如：设计师按照iPhone6设备的750px起稿，某一个元素的宽度为300px，那么如果进行适配呢？

由于是在iPhone6设备上，DPR值为2，所以设计稿上的300px实际等于150px的CSS像素
将iPhone6的宽度分为100列，每列就是 750/2/100=3.75px。（计算根元素的font-size）
这个元素是150px，那么就占 150/3.75=40列 。（计算多少个rem）

这个例子中，3.75就是根元素的font-size，而40就是我们要计算的份数，也就是多少个rem，在iPhone6中font-size是3.75px，iPhone6Plus中font-size是4.14px，也就是在iPhone6中这个元素占 3.75 * 40 = 150px，在iPhone6Plus中这个元素占 4.14 * 40 = 165.6px

通过JS计算出根元素的font-size

(function () {
	const html = document.documentElement;
	const width = html.clientWidth; // 获取设备的CSS像素宽度
	html.style.fontSize = width / 100; // 把设备分为100份计算出根元素的font-size，也就是每个rem的大小
})();

1
2
3
4
5

这个方法虽然能实现适配，但是它非常繁琐，计算出font-size之后，还需要计算出元素的CSS像素大小，之后再去除以每列的宽度，最后得到一个元素的占多少个rem，每次都需要一系列的计算，所以还有一种优化方案，可以轻松的实现转换

(function (doc, designWidth) {
	const html = document.documentElement;
	function refreshRem() {
		const width = html.clientWidth;
		if (width >= designWidth) {
			html.style.fontSize = "100px"; // 如果设备宽度大于设计稿，测量出来是多少就是多少
		} else {
			html.style.fontSize = 100 * (width / designWidth) + "px";
			// 1、width / designWidth 计算出在设计稿中每列的宽度 例如iPhone6 375/750=0.5 所以每一列的宽度就是0.5
			// 2、虽然计算出了每列是0.5 但是浏览器中的font-size不能取这么小的值 所以把这个0.5 * 100 这也就是为什么前面还要乘以100的原因
			// 3、乘以100之后，font-size的值就是50px 以iPhone6为例，设计稿上的一个元素宽为375 换算成CSS像素就是187.5 每列是50 所以这个元素占187.5/50=3.75列 刚好就是小数点往前移动两位
		}
	}
	doc.addEventListener("DOMContentLoaded", refreshRem);
})(document, 750);

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

这种方法只需要将设计稿上的尺寸小数点往前移动两位就行，非常方便

vw、vh适配

vw、vh、vmin和vmax都是CSS3中新增的和viewport相关的单位

vw：viewport’width的缩写，vw把屏幕的默认viewport（layout viewport）宽度，也就window.innerWidth分为100份，1vw就是window.innerWidth的1%
vh：viewport’height的缩写，和vw一样，vh把屏幕的默认viewport高度，也就是window.innerHeight分为100分，1vh就是window.innerHeight的1%
vmin：当前vw和vh中较小的值
vmax：当前vw和vh中较大的值

vw、vh适配

vw和vh把屏幕分成了100份，1vw就是一列，例如在iPhone6中，CSS像素宽度为375px，那么一列也是1vw就是3.75px

使用rem适配时，首先要计算出根元素的font-size：

html.style.fontSize = 100 * (width / designWidth) + "px";

通过这个公式可以计算出在iPhone6中根元素的字体大小为50px，而如果要使用vw来适配，由于1vw在iPhone6中为3.75px，所以可以直接计算出根元素的字体大小为 50/3.75= 13.333333333333334vw，之后就可以像之前一样使用rem适配

vw和vh适配的方案是最简单的，它不需要向上面的方法那样写一段js代码来计算出当前的font-size值，只需要在最开始的时候根据设计稿的宽度计算出根元素的font-size，计算公式为：

html.style.fontSize = (width / designWidth) * 100 / (width / 100) + 'vw'

适配相关的第三方库

hotcss

github地址：https://github.com/imochen/hotcss

介绍

hotcss不是一个库，也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。
使用动态的HTML根字体大小和动态的viewport scale。
遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下，让你的页面看起来是一样的。

使用：

hotcss的目录结构为：

hotcss的目录结构

我们只需要在html中引入hotcss.js，之后在可以根据自己CSS使用的预处理器来选择下面的文件，例如我们使用的是sass

px2rem.scss：

@function px2rem($px) {
  @return $px * 320 / $designWidth/20 + rem;
}

1
2
3

index.scss：

@import "./px2rem.scss";

$designWidth: 750;

* {
  margin: 0;
  padding: 0;
}

div {
  width: px2rem(375);
  height: px2rem(375);
  background-color: aqua;
}

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

先定义设计稿的宽度，之后使用 px2rem 方法，我们就可以直接使用设计稿上的单位，而不需要进行换算，写完scss文件之后，在vscode中可以使用 Easy Sass 这个插件来将scss文件编译成css文件，之后直接在html中因为css文件即可

Easy Sass

lib-flexible

github地址：https://github.com/amfe/lib-flexible

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

lib-flexible是手淘移动端适配的一个库，由于vw、vh等viewport的单位得到了越来越多浏览器的支持，官方已经不再维护这个库了

使用

在html中引入 lib-flexible.js，之后就可以直接使用

在vscode中可以使用 cssrem 这个插件，它能将px转换成rem
cssrem

例如在iPhone6中，font-size的值为37.5px，这时我们可以将cssrem中的根元素font-size值设置为75（之所以设置75而不是37.5是因为iPhone6的DPR值为2，设计稿的大小得除以2才是CSS像素值，这里直接乘以2，之后就不用手动计算CSS像素值）
cssrem