基于REM的移动端响应式适配方案

视口

在前一段时间，我曾经写过一篇关于viewport的文章。最近因为在接触移动端开发，对viewport有了新的理解。因而，打算从新写一篇文章，介绍移动端视口的相关概念。

关于这篇文章说到的全部知识，本质上离不开如下代码

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

@media all and (max-width: 320px) {
    // do something
}

了解过移动端开发的朋友，其实对以上的代码就不会陌生。上面的代码，主要涉及到meta视口标签与媒体查询。单单以上简短的代码就须要明白：

• 像素(pixel)
• 视口(viewport)
• 分辨率(resolution)与设备像素比(device-pixel-ratio)
• meta视口标签
• 媒体查询(media query)
• JavaScript相关的属性和方法
• 如何实现移动端响应式适配的问题

那就进入主题吧：）

像素

在移动端上，所谓的像素分为两种

• CSS像素：CSS像素就是咱们在编写CSS代码时的像素。
• 设备像素：设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。

1个CSS像素等于多少个设备像素取决于屏幕特性(是不是高清屏)和用户缩放的比例。当用户将屏幕从100%放大到200%时，1个CSS像素等于2个设备像素，反之相反；当屏幕为Retina高清屏(如iPhone6，dpr=2)时，1个CSS像素就等于2个设备像素，反之相反。

须要明白一点的是，2个设备像素并非说它扩大了两倍，而是说在页面上仍然显示的是1px(1个CSS像素)，可是这1px是由2个设备像素组成。像素点变多了，所以图像会变得更加清晰。下面这幅图大体说明了CSS像素和设备像素的区别。

视口

在移动端上，存在三种不一样的视口。

• 布局视口：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，因为要使为PC端浏览器设计的网站可以彻底显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕。在移动端，默认状况下，布局视口等于浏览器窗口宽度。布局视口限制了CSS的布局。在JavaScirpt上获取布局视口的宽度能够经过document.documentElement.clientWidth | document.body.clientWidth获得。
  
• 视觉视口：视觉视口是用户正在看到的区域。用户能够缩放来操做视觉视口，而不影响视觉视口的宽度。视觉视口决定了用户看到了什么。在JavaScript上获取视觉视口的宽度能够经过`window.innerWidth获得。

在PC端上，视觉视口等于布局视口的宽度，不管用户是放大屏幕仍是缩小屏幕，这两个视口的宽度仍然相等。可是，在移动端上，并不是如此。缩放屏幕的过程实质上就是CSS像素缩放的过程。当用户将屏幕放到到两倍时，视觉视口变小了(由于视觉视口中CSS像素变少了)，而每单位的CSS像素却变大了，所以1px(1个CSS像素)等于2个设备像素。同理，当为iPhone6(dpr=2)时，视觉视口中CSS像素变少了，可是1px等于2个设备像素。当用户缩小屏幕时也是一样的道理。缩放的过程并不会影响布局视口的大小。

也就是说，高清屏(dpr>=2)或屏幕放大时，视觉视口变小(CSS像素变少)，每单位的CSS像素等于更多的设备像素；非高清屏(dpr<2)
或屏幕缩小时，视觉视口变大(CSS像素变多)，每单位的CSS像素等于更少的设备像素。
可是不管放大或缩小屏幕，布局视口的宽度仍然保持不变。

• 理想视口：因为默认状况下布局视口等于浏览器窗口宽度，所以在移动端上须要经过放大或缩小视觉视口来查看页面内容，这固然体验糟糕啊！所以在移动端引入了理想视口的概念。理想视口的出现必须须要设置meta视口标签，此时布局视口等于理想视口的宽度。常见的，iPhone6的理想视口为375px * 667px，iPhon6 plus的理想视口为414px * 736px。在JavaScript上获取理想视口的宽度window.screen.width获得。

<meta name="viewport" content="width=device-width" />

当设置了meta视口标签以后，iPhone6的布局视口宽度将等于375px，iPhone6plus布局视口的宽度等于414px。其余移动设备类似。

理想视口会随着屏幕的旋转而改变。当iPhone6为肖像模式时(即竖屏)，此时理想视口为375px * 667px；但为横屏模式时，此时理想视口为667px * 375px。

分辨率与设备像素比

分辨率是指每英寸内点的个数，单位是dpi或者dppx。设备像素比是指设备像素与理想视口宽度的比值，没有单位。

分辨率在CSS上能够经过resolution属性设置。通常状况下会使用dpi做为分辨率的单位，由于dppx并不是全部浏览器都支持。

而设备像素比在CSS上能够经过device-pixel-ratio属性设置，而在JavaScript上能够经过window.devicePixelRatio属性获取。

同时，1dpr=96dpi。举个例子。在iPhon6下，理想视口宽度为375px，而设备像素为750px，所以此时设备像素比为2，分辨率为192dpi。所以若是为iPhon6如下的设备写某个特定样式，能够这样写

// 注意，device-pixel-ratio须要带上-webkit-前缀，保证浏览器兼容性问题。
@media all and (max-width: 375px) and (-webkit-max-device-pixel-ratio: 2) {
    body {
        background-color: red;
    }
}
或者
@media all and (max-width: 375px) and (max-resolution: 192dpi) {
    body {
        background-color: red;
    }
}

meta视口标签

meta视口标签是是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口的尺寸相匹配。meta视口标签存在5个指令

1. width：设置布局视口的宽度，通常设为device-width。
2. initial-scale：初始缩放比例。1即100%，2即200%，以此类推
3. maximum=scale：最大缩放比例。
4. minimum-scale：最小缩放比例。
5. user-scalable：是否静止用户进行缩放，默认为no。

须要注意的是，缩放是根据理想视口进行计算的。缩放程度与视觉视口的宽度是逆相关的。也就是说，当你将屏幕放到到2倍时，视觉视口为理想视口的一半，此时每单位的CSS像素等于2个设备像素。缩小时则相反。

响应式适配问题

理解了一些基本概念以后，咱们来看看如何实现响应式适配。

通常状况下，前端开发工程师会根据设计师给的设计稿进行开发。而设计稿通常是根据iPhon6手机进行页面的设计的。咱们知道iPhone6的理想视口宽度为375px，同时iPhone6的设备像素比为2，设备像素为750px。咱们须要在只有一份设计稿的状况下写出适应各类屏幕不一的终端设备，所以须要一些移动端响应式适配的方案。此时须要用到的一个单位是REM。简单的说，REM会根据HTML元素的font-size进行设置。当HTML元素的font-size: 16px时，1rem = 16px, 1.5rem = 24px

我的总结出了两套响应式适配的方案(前提是设置meta视口标签)。两套方案由一个共同点：给定一个基准值。

假如如今拿到的设计稿是根据iPhone6进行设计的。

方案一

方案一是设计稿给什么尺寸，咱们就将其缩小100倍，最后换算成rem单位。好比，设计稿上某个title的font-size为32px，此时写CSS样式时就直接缩小100倍，即0.32rem。

因为rem是根据根元素进行设置的，因此咱们须要设置根元素的font-size。

给HTML设置font-size的基本思路：

1. 经过window.screen.width获取不一样移动设备的理想视口宽度。
2. 规定基准值为750px(此值为iPhon6的设备像素)。
3. (1) / (2) * 100即获得HTML元素的font-size。(乘于100是由于咱们在前面将字体缩小了100倍，此时要乘回来)

换算成公式即：设计稿尺寸 / 100 * (不一样设备的理想视口宽度 / 基准值 * 100)

举个例子。

// 根据不一样设备的理想视口宽度动态设置根元素的`font-size`。
let idealViewWidth = window.screen.width;
const BASICVALUE = 750;
document.documentElement.style.fontSize = (idealViewWidth / BASICVALUE) * 100 + 'px';

所以，在不一样设备下的HTML元素的font-size大小和实际像素以下

iPhone5 : (320 / 750) * 100 = 42.667px
iPhone6 : (375 / 750) * 100 = 50px
iPhone6+: (414 / 750) * 100 = 55.2px

假如设计稿上标注.title类上的字体为32px，此时有
iPhone5上的某字体:  42.667 * 0.32rem = 13.653px
iPhone6上的某字体： 50 * 0.32rem = 16px
iPhone6+上的某字体: 55.2 * 0.32rem = 17.664px

能够看出，在不一样设备下，同一字号的字体使用rem单位能够实现不一样设备的响应式适配。不仅仅在字体上可使用，在移动端上的width、height等涉及单位的均可以使用。这样的话，就能够在不一样设备下完美的复现设计稿的要求。

方案二

此方案使用了SASS预处理器。基本思路：

1. 设置根元素的font-size。经过获取不一样设备的理想视口宽度，再除以10。(除以10是由于不想font-size太大。)
2. 给定基准值，此时给的基准值为75px(此值为iPhone6的设备像素除以10)
3. 写SASS Function

代码以下

SASS
@function px2rem ($value) {
    $para: 75px;
    @return $value / $para + rem;
}

JS
let idealViewWidth = window.screen.width;
document.documentElement.style.fontSize = idealViewWidth / 10 + 'px';

在不一样设备下根元素的`font-size`：

iPhone5 : 320px / 10 = 32px
iPhone6 : 375px / 10 = 37.5px
iPhone6+: 414px / 10 = 41.4px

根据以上，能够看一个例子。某设计稿下5个li，横向排布，每一个的宽度为200px
CSS
@import (路径名)
iPhone5: li { width: px2rem(200px) } => width: 85.333px
// 此时(200px / 75px = 2.667rem) 2.667rem = 2.667 * (320 / 10) = 85.3333px
iPhone6: li { width: px2rem(200px) } => width: 100px
// 此时(200px / 75px = 2.667rem) 2.667rem = 2.667 * (375 / 10) = 100px
iPhone6+: li { width: px2rem(200px) } => width: 4138px
// 此时(200px / 75px = 2.667rem) 2.667rem = 2.667 * (414 / 10) = 110.4138px

所以，一个200px的(实际只有100px)的li元素的宽度在不一样设备下显示了不一样的宽度，实现了响应式适配的问题。

方案三

方案三与前两个方案不相同，此方案并不须要给根元素设置font-size，不须要基准值。此方案是根据不一样设备的dpr来实现页面的缩放的。

基本思路以下：

1. 经过window.devicePixelRatio获取设备的dpr
2. 根据不一样的dpr缩放页面，动态设置meta视口标签。(缩放是放大或缩小CSS的过程，根据理想视口进行缩放，与视觉视口方向相反)

代码以下：

let dpr = window.devicePixelRatio;
let meta = document.createElement('meta');
let initialScale = 1 / dpr;
let maximumScale = 1 / dpr;
let minimumScale = 1 / dpr;
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', `width=device-width, user-scalable=no, initial-scale=${initialScale}, maximum-scale=${maximumScale}, minimum-scale=${minimumScale}`);
document.head.appendChild(meta);

所以，能够直接根据设计稿的尺寸写CSS样式，如设计稿下有5个li元素，宽度为200px，此时不一样设备下li的宽度

iPhone5 : li { width: 200px } 实际宽度为：100px
iPhone6 : li { width: 200px } 实际宽度为：100px
iPhone6+: li { width: 200px } 实际宽度为：66.667px

以上三种方法解决了大部分移动端响应式适配的问题，可是在1px问题上，使用以上的方法仍然(除了第三个方案)，都不能很好的解决1px的问题。有时间写一篇文章介绍如何解决1px的问题。

固然..关于移动端响应式适配还有许多好的解决方法，但愿留言同你们分享：）