最先開始做移動端適配的時候祠斧，是這樣寫的：
先在html頭部添加meta標簽:viewport
viewport 是用戶網(wǎng)頁的可視區(qū)域领迈。翻譯為中文可以叫做"視口"压彭。
手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中运翼，通常這個虛擬的"窗口"（viewport）比屏幕寬双谆，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局）壳咕，用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。
為了更好的理解移動端適配顽馋，可以看下像素和視口谓厘。下面這篇文章對像素和適口解釋的挺詳細的：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），官方解釋
意思就是根據(jù)網(wǎng)頁的根元素來設置字體大小寸谜，和em（font size of the element）的區(qū)別是竟稳，em是根據(jù)其父元素的字體大小來設置，而rem是根據(jù)網(wǎng)頁的跟元素（html）來設置字體大小的
只要引入這一段代碼就可以實現(xiàn)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還有其他的寫法诊笤，最根本的就是動態(tài)設置html的font-size。
動態(tài)設置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來適配各種大小的屏幕
具體是實現(xiàn)的原理圖例：
寬度為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
| 圖 | 內(nèi)容 |
|---|---|
 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是因為我們要實現(xiàn)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）
