移动端适配常用解决方案

几个概念：

设备独立像素（dip）、设备像素比（dpr）、设备像素

设备像素： 即物理像素，指设备能控制显示的最小单位，就是显示屏上一个个的像素点。

设备独立像素（dip）: 也称为逻辑像素、密度独立像素，指独立于设备的用于逻辑上衡量像素的单位。 (重点：这个是我们在开发中使用的像素)

设备像素比（dpr）: 指的是物理像素与设备独立像素的比例。

viewport: viewprot 指的是移动设备浏览器中放置页面的一个虚拟的窗口，该窗口可大于或小于移动设备的可视区域。

一般移动设备默认都是 viewprot 大于其可视区域，这样不会破坏没有针对移动设备优化的网页的布局，用户可以通过平移和缩放来看网页的其他部分，大部分移动设备默认的 viewport 为 980px（这里的 px 指的就是设备独立像素）。

那么各个移动设备的设备像素比是怎么得出来的呢？

一般来讲，设备像素比是屏幕像素密度除以 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 。

---

使用 px 像素单位时，同样样式的代码在不同屏幕分辨率的移动设备中显示的情况基本一致（注意这里是基本一致而不是完全一致），是因为移动设备中的设备像素比将设备独立像素转换了。

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;
}

当设计稿中有一个宽高都为 50px 的元素时，我们便可以如下写样式

div{
  width:pxToRem(50);
  height:pxToRem(50);
}

注意点：

1. 将 viewport 宽度设置为移动设备逻辑宽度；
2. 使用 js 根据不同分辨率的移动设备来设置根元素的 font-size 值，注意移动端与 pc 端的临界值；
3. 在样式中字体使用 px 单位，而其它元素使用 rem 单位；
4. 使用 sass 中的 function 来设置一个 px 与 rem 之间的转换函数；