最近在重构公司的一个移动端项目，除了需要对新项目进行前端技术栈的搭建外，还需要考虑的一个重要问题就是移动端适配，关于移动端适配的理解我之前一直是处于一种比较朦胧的状态（知其然而不知其所以然），所以最近又做了进一步的学习，在该博文中谈谈我对移动端适配的理解。
在这篇博文中，我会先对移动端设备的一些基础概念做一些解释，其中最主要的是设备像素比、设备独立像素和 viewport 的概念，然后在此基础上对移动端适配做深入的说明，最后是探究移动端适配的解决方案。
设备独立像素（dip）、设备像素比（dpr）
首先让我们来了解一下关于移动设备中的各个概念：
- 设备像素：即物理像素，指设备能控制显示的最小单位，就是显示屏上一个个的像素点。
- 屏幕尺寸：指屏幕的对角线长度，单位是英寸，1英寸＝2.54厘米。
- 屏幕分辨率：指手机屏幕的物理像素点数，一般以「纵向物理像素点数＊横向物理像素点数」表示。如 iphone 6 的屏幕分辨率为 1334 * 750。
- 屏幕像素密度（dpi/ppi）：指手机屏幕上每英寸物理像素点数。其值与屏幕分辨率和屏幕尺寸有关，计算公式是：dpi = √(纵向物理像素点数² + 横向物理像素点数²) / 屏幕尺寸。
设备独立像素（dip）也称为逻辑像素、密度独立像素，指独立于设备的用于逻辑上衡量像素的单位。
设备像素比（dpr）指的是物理像素与设备独立像素的比例。在程序中则可以通过 window.devicePixelRatio 来获取，该属性是只读的，但不是常量，对浏览器的一些操作会改变这个值。
那么各个移动设备的设备像素比是怎么得出来的呢？
设备像素比是跟该移动设备的屏幕像素密度有关的。一般来讲，设备像素比是屏幕像素密度除以 160 的整数倍，即 dpr = Math.floor(dpi / 160) = Math.floor(√(纵向物理像素点数²+横向物理像素点数²) / 屏幕尺寸 / 160) 。
如 iphone 6 尺寸为 4.7 英寸，屏幕分辨率为 1334 * 750，那么我们可以得出 iphone 6 的设备像素比为：Math.floor(√(1334²+750²) / 4.7/160) = 2。
前面说到，设备像素比指的是物理像素与设备独立像素的比例，所以在知道了移动设备的设备像素比之后，我们便可以得出该移动设备的相关设备独立像素值，即设备独立像素 = 物理像素 / 设备像素比。
如 iphone 6 的横向分辨率是 750，设备像素比是 2，那么可以得出 iphone 6 的逻辑宽度（即以设备独立像素来计算的移动设备的宽度）是 375px 。
viewport
viewprot 指的是移动设备浏览器中放置页面的一个虚拟的窗口，该窗口可大于或小于移动设备的可视区域。
一般移动设备默认都是 viewprot 大于其可视区域，这样不会破坏没有针对移动设备优化的网页的布局，用户可以通过平移和缩放来看网页的其他部分，大部分移动设备默认的 viewport 为 980px（这里的 px 指的就是设备独立像素）。
我们在进行移动端页面的重构时，经常会加上如下一句代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
这句代码的作用是将移动设备的 viewport 设置为该设备的逻辑宽度，同时初始缩放值为 1 最大缩放值为1，并且不允许用户进行缩放。
让我们来看一下 viewport 中的属性：
当我们把 viewport 中的 width 设置为 width-device 时，viewport 的宽度等于移动设备的逻辑宽度，而如果设置 initial-scale 为 1 也会得到相同结果。一般来讲我们会同时设置这两个属性，当这两个属性因为值不同而产生不同的效果时，浏览器则会取得两者中较大的值。
下面举个例子来帮助理解 viewport 属性的作用：
<style>
html,body{
margin:0;
padding:0;
}
.box{
width:100px;
height:100px;
background:blue;
}
</style>
<div class="box"></div>
在谷歌浏览器中以 iphone 6 的调试效果如下：
可以看到，在没有加上 viewport 属性的情况下，iphone 6 中 viewport 的默认值是 980px，前面说过，这个是以设备独立像素来计算的，也就是和我们平时在样式代码中写的 px 是一样的，代码中定义了一个宽高都为 100px 的蓝色块，所以从横向上来看的话，蓝色块在屏幕中占了 100/980，如图所示。
而如果我们设置了 viewport 属性的话：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
效果如下：
可以看到，在加上了 viewport 属性后，移动设备的 viewport 宽度被设置成了 device-width，即该移动设备的逻辑宽度 ，在 iphone 6 中 device-width 值为 375px，所以从横向上来看的话，蓝色块在屏幕中占了 100/375，如图所示。
深入理解移动端适配
前面我们已经理解了设备独立像素、设备像素比和 viewport 的一些概念，那么要深入地去理解移动端适配，我们需要先弄清楚设备像素比的作用是什么。
举一个最容易理解的例子。iphone 3 和 iphone 4 的屏幕尺寸是一样的，但是 iphone 3 的屏幕分辨率是 480 * 320，而 iphone 4 的屏幕分辨率是 960 * 640，iphone 4 的横纵向分辨率分别是 iphone 3 横纵向分辨率的两倍。
假设 iphone 3 和 iphone 4 的设备像素比都是 1 的话，那么可以得到它们的逻辑宽度分别是 320px 和 640px，从上面加了 viewport 属性的例子来看的话，在 iphone 3 中蓝色块的宽度占比是 100/320，而在 iphone 4 中占比是 100/640，我们就会看到同样的代码在不同的移动设备中的显示差别很大。
而实际上 iphone 3 的设备像素比是 1，iphone 4 的设备像素比是 2，所以我们可以得到它们的逻辑宽度都是 320px，所以实际上蓝色块在这两款不同的移动设备中显示的大小是一样的。
所以我们可以得出，使用 px 像素单位时，同样样式的代码在不同屏幕分辨率的移动设备中显示的情况基本一致（注意这里是基本一致而不是完全一致），是因为移动设备中的设备像素比将设备独立像素转换了。
而为什么说在不同分辨率的移动设备中显示的情况基本一致而不会完全一致呢？是因为存在很多不同屏幕分辨率的移动设备，它们的逻辑宽度并不都是一样的。
如 iphone 6 的分辨率是 1334 * 750，设备像素比是 2，所以其逻辑宽度是 375px，从上面加了 viewport 属性的例子来看的话，蓝色块占比是 100/375，可以看到其蓝色块在屏幕中的占比跟 iphone 3、iphone 4 是不一样的。
所以我们可以知道，设备像素比在一定程度上帮助我们进行了移动端适配。实际上，我们还需要通过一些其它方案来对移动端进行适配。我们需要进行移动端适配的根本原因是存在多种不同逻辑宽度的移动设备
我们对移动端进行适配的一个终极目标就是，使其在不同移动设备中所占的比例是大致相同（对于上图例子来说，就是使蓝色块在不同的移动设备中所占的比例差不多）。
移动端适配解决方案
最后，是探究移动端适配的解决方案，这里我要为 《从网易与淘宝的font-size思考前端设计稿与工作流》 这篇博文打 call，写得真的很不错。在这篇博文中，分别介绍了拉勾、网易和淘宝的移动端适配解决方案，拉勾是通过设置样式的百分比来达到在一定程度上对不同分辨率的移动设备进行适配，这种方式适合简单项目的适配；而网易和淘宝使用的则是众所周知的方案，使用 rem 进行适配。
相对而言，我觉得网易的方案更加容易理解和实践，所以在我的项目中也是参考网易的方案来实现移动端适配的。而对于淘宝的移动端适配方案，则显得更加精巧，感兴趣的童鞋可以自行阅读理解哦。
那么，rem 是什么呢？rem（font size of the root element），意思即根据根元素的 font-size 来设置字体的大小。跟 px 一样，它是 CSS 中的一个样式单位，会根据根元素的 font-size 值来转换成 px 单位，公式为：px = rem * html(font-size)。
html{
font-size:10px;
}
div{
width:2rem; // 2*10=20px
}
所以我们实现移动端适配的核心思想就是：使用 rem 作为样式单位，根据不同分辨率的移动设备设置根元素的 font-size 值。
那么问题来了，如何合理地设置根元素的 font-size 值呢？
以 iphone 6 的设计稿为基准，即设计稿横向分辨率为 750，取 100 为参照数（即在使用 rem 时与使用 px 时相差 100 的倍数），则我们可以知道 html 的宽度为 7.5rem（750 / 100），而我们知道 iphone 6 的逻辑宽度是 375px，所以 html 的宽度也为 375px，那么此时 7.5rem * html(font-size) = 375px，所以可以得出 html(font-size) = 375 / 7.5，即 html(font-size) = deviceWidth / 7.5。
通过 js 来设置根元素的 font-size
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
当然，这里有一个前提，就是设置 viewprot 宽度为移动设备的逻辑宽度
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
而当 deviceWidth 大于 750px 时，我们应该去访问的是 pc 版的页面，所以当 deviceWidth 大于 750px 时我们不应该再改变根元素的 font-size 值，完整的代码如下
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 750) deviceWidth = 750;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
而为了使我们在书写样式的时候跟设计稿的大小更加契合，可以通过 sass 的 function 来设置一个 px 与 rem 之间的转换函数
@function pxToRem($num) {
@return ($num/100) * 1rem;
}
当设计稿中有一个宽高都为 100px 的元素时，我们便可以如下写样式
div{
width:pxToRem(100);
height:pxToRem(100);
}
还需要注意的是为了使字体在不同分辨率的移动设备中看起来更加舒适，其大小不应该用 rem，而应该使用 px。
最后，总结一下我在项目中使用的移动端适配方案：
- 将 viewport 宽度设置为移动设备逻辑宽度；
- 使用 js 根据不同分辨率的移动设备来设置根元素的 font-size 值，注意移动端与 pc 端的临界值；
- 在样式中字体使用 px 单位，而其它元素使用 rem 单位；
- 使用 sass 中的 function 来设置一个 px 与 rem 之间的转换函数；
网友评论