移动端适配

最先开始做移动端适配的时候，是这样写的：

先在html头部添加meta标签:viewport

viewport 是用户网页的可视区域。翻译为中文可以叫做"视口"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

为了更好的理解移动端适配，可以看下像素和视口。下面这篇文章对像素和适口解释的挺详细的：http://web.jobbole.com/90075/

viewport标签极其属性：

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

然后再用rem适配

rem是（font size of the root element），官方解释

1.png

意思就是根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的跟元素（html）来设置字体大小的

只要引入这一段代码就可以实现rem适配。

// rem  样式适配
(function(doc, win) {
    var _root = doc.documentElement,
        resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
        resizeCallback = function() {
            var clientWidth = _root.clientWidth,
                fontSize = 10;
            if (!clientWidth) return;
            if (clientWidth < 640 && clientWidth != 384) {
                fontSize = parseInt(10 * (clientWidth / 320));
            } else if (clientWidth == 384) {
                fontSize = 11;
            } else {
                fontSize = parseInt(10 * (640 / 320));
            }
            _root.style.fontSize = fontSize + 'px';
            doc.getElementsByTagName("body")[0].style.display = "block";
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, resizeCallback, false);
    doc.addEventListener('DOMContentLoaded', resizeCallback, false);
})(document, window);

这么写是为了方便计算，写css时，200px 直接写成 2rem。
当然使用rem还有其他的写法，最根本的就是动态设置html的font-size。

动态设置html的font-size还有一种方法： 利用css的media query来设置

@media screen and (min-width: 320px) and (max-width : 360px) {
    html {
        font-size: 12px;
    }
}
@media screen and (min-width: 360px) {
    html {
        font-size: 14px;
    }
}
@media screen and (min-width: 400px) {
    html {
        font-size: 16px;
    }
}

@media screen and (min-width: 440px) {
    html {
        font-size: 18px;
    }
}

@media screen and (min-width: 480px) {
    html {
        font-size: 20px;
    }
}

@media screen and (min-width: 640px) {
    html {
        font-size: 22px;
    }
}

rem适配进阶

淘宝适配使用lib-flexible来适配各种大小的屏幕

具体是实现的原理图例：
宽度为10rem
Nexus 6p 布局宽度 为 10rem * 41.2px=412px
iphone5 布局宽度 为 10rem * 64px=640px=320 * dpr=320 * 2
iphone6 plus 布局宽度 为10rem * 124.2px=1242px=414 * dpr=414 * 3

图	内容
Nexus6p.png	dpr1.png
iphone7.png	dpr2.png
iphone7p.png	dpr3.png

1 设计给的稿子双倍的原因是iphone6这种屏幕属于高清屏，也即是设备像素比(device pixel ratio)dpr比较大，所以显示的像素较为清晰。

2 一般手机的dpr是1，iphone4，iphone5这种高清屏是2，iphone6s plus这种高清屏是3，可以通过js的window.devicePixelRatio获取到当前设备的dpr，所以iphone6给的视觉稿大小是（*2）750×1334了。

3 拿到了dpr之后，我们就可以在viewport meta头里，取消让浏览器自动缩放页面，而自己去设置viewport的content例如（这里之所以要设置viewport是因为我们要实现border1px的效果，加入我给border设置了1px，在scale的影响下，高清屏中就会显示成0.5px的效果）

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

4 设置完之后配合rem，修改

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

双倍75，这样就可以完全按照视觉稿上的尺寸来了。不用在/2了，这样做的好处是：
1 解决了图片高清问题。
2 解决了border 1px问题（我们设置的1px，在iphone上，由于viewport的scale是0.5，所以就自然缩放成0.5px）