移动端适配
最先开始做移动端适配的时候，是这样写的：
先在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）
