Web移动端设备适配

一、前导

在CSS3新定义的rem之前，可能大家都会想到之前CSS中的设置页面字体大小的单位：px、em、pt等。

但在相比之下，CSS3新定义的rem更加适合用来做移动端的响应式。

在兼容性方面：在移动端方面的

     iOS：6.1系统以上的都支持

     android:  2.1系统以上的都支持

大部分主流的浏览器都支持

rem与em的区别：

     rem在官网的解释为：(font size of the root element)

     em在官网的解释为：(font size of the element)

就是根据网页的根元素来设置字体的大小。而不同的是：em是根据其父元素的字体大小来设置；rem则是根据网页的根元素（html）来设置大小。

在大部分的主流浏览器IE9+、Firefox、Chrome、Safari、Opera中，如果我们不修改字体配置，则font-size默认为16px，也就是

html{
    font-size: 16px;
}

那我们想要用rem来给div的字体大小设置为14px，我们需要这样写

div{
    font-size: 0.875rem;/* 14 / 16 = 0.875 */
}

二、rem屏幕适配

在用rem进行屏幕适配之前，回想一下我们之前进行适配的一些方法：

1、比较简单的情况下，高度一般设置为定高，然后宽度铺满整个屏幕。

2、相对复杂的情况下，可以利用百分比进行适配，或是实用flex弹性布局等css设置某些定制的宽度。

3、最后，针对再复杂的响应式，可以根据css3的media query属性进行适配；就是说根据不同的设备的大小来设置相应的css样式。

以上的这些个方法都可以做到响应式，那既然出现rem这个新东西；那么也能够做到响应式这方面。

既然rem是根据html元素来改变的值的大小；所以我们可以根据需要设置html的大小来实现我们css样式中的适配效果。

rem数值计算

使用rem来设置css值，一般都会经过一层的计算才会得到数值，例如：在没有设置过html大小（font-size）；想要把一个div的width设置为100px，所以需要计算出100px对应的rem值；100/16=6.25rem。如果这样设置我们写css的时候就非常的繁琐。

对于写css样式，我们可以使用sass来写，也可以不用直接写

在没有使用sass的时候；为了方便一点，可以讲html的font-size设置为100px；这样我们在转化rem的时候；直接除以100再加上rem单位就可以了。

如果我们使用了sass：就可以利用sass来解决这个问题，可以利用函数来解决，定义一个默认变量；然后通过函数来转化为rem

$baseSize: 75px !default;

html,body{
  margin:0;
}

@function pxToRem($px){
  @return $px / $baseSize * 1rem;
}

.mobile{
  width: pxToRem(375px);
  height: 200px;
  background: #00B7FF;
}

说到这；关于rem需要有一个其准值；就是设置别的有单位的大小，都是参考这个其准值来设置的；默认的其准值就是16px 和html的font-size有关。

我们写的样式由于需要兼容不同的屏幕设备；所以我们需要选取一个确定的屏幕设备作为参考；其他的设备都是在其的基础上变化。

比如我们选取iphone6来作为参考其准设计；iphone6的分辨率为375x667

所以我们可以设置rem的其准值为

var w = window.innerWidth;
document.documentElement.style.fontSize = w/10 + 'px';

即 1rem ＝ 37.5px

通过上面的js代码，可以动态的改变其准值；

这样我们可以通过上面的sass文件；改变

@function pxToRem($px){

       @return $px / $baseSize * 1rem;

} 函数传入的值就可以设置我们想要设置的宽度大小

rem进阶用法

进阶前，需要了解几个概念：

1、视窗 viewport

可以这么说，viewport指的是浏览器的窗口，在pc端浏览器中，就是等于窗口的宽高；

但是在移动端的有点不一样，因为其viewport过小；所以提供了两个viewport：虚拟的viewportvisualviewport和布局的viewportlayoutviewport。

2、物理像素(physical pixel)

物理像素又被称为设备像素，就是在设备中显示的最小物理部件；就是这些微小的设备像素阻碍了我们肉眼看图像的效果。

3、设备独立像素(density-independent pixel)

设备独立像素又被叫为密度无关像素，就是可以这样认为是计算机坐标系统的一个点，这一个点可以经过程序使用虚拟像素（比如CSS像素），经过系统转化为 物理像素。

4、CSS像素

称为一个抽象的单位，用来精确度量Web页面上的内容，又被称为虚拟像素。

5、屏幕密度

屏幕密度是指一个设备表面上存在的像素数量，通常以每英寸有多少像素来计算(PPI)。

6、设备像素比(device pixel ratio)

简称dpr，就是     设备像素比 ＝ 物理像素 ／ 设备独立像素

设备独立像素与屏幕密度有关。dip可以用来辅助区分视网膜设备（Retina）还是非视网膜设备

在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素

通常我们拿到的设计稿一般为 iphone6的，尺寸为两倍大小

一般的手机的dpr是1，像iphone4、iphone5、iphone6是2、iphone6s plus这种高清屏是3；可以通过js来获取window.devicePixelRatio当前的设备像素比；

获取dpr之后，可以通过创建meta标签自己设置viewport中的内容；

var w = window.innerWidth;
document.documentElement.style.fontSize = w/10 + 'px';

var dpr = window.devicePixelRatio;
var metaE = document.createElement('meta');
metaE.setAttribute('name', 'viewport');
metaE.setAttribute('content','initial-scale=' + 1/dpr + ',maximum-scale=' + 1/dpr + ',minimum-scale=' + 1/dpr + ',user-scalable=no');
document.documentElement.firstElementChild.appendChild(metaE);

参考网址：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

  http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/