研究m端開發(fā)自適應(yīng)有一段時(shí)間了，下面做一個(gè)總結(jié)
移動(dòng)端自適應(yīng)方案有很多種
1.流式布局
也就是固定高度驰徊，寬度使用百分比的方法，這種方法會(huì)導(dǎo)致一些元素在大屏手機(jī)上拉伸嚴(yán)重的情況，影響視覺效果雌团，只有在很少一部分手機(jī)上能完美的展示設(shè)計(jì)師想要的效果。攜程之前用的就是流式布局士聪，但之后也改版了锦援。
2.固定寬度做法
比如早期的淘寶webpage，頁(yè)面設(shè)置成320的寬度戚嗅，超出部分留白雨涛，在大屏幕手機(jī)上枢舶，就會(huì)出現(xiàn)兩條大百邊，分辨率高的手機(jī)替久，頁(yè)面看起來(lái)就會(huì)特別小凉泄，按鈕，文字也很小蚯根，之后淘寶改了布局方案后众，也就是接下來(lái)要講的rem布局，
3.響應(yīng)式做法
用一些css框架颅拦，比如bootstrap蒂誉，或者jqueryUI，使用媒體查詢距帅，這種方式維護(hù)成本高右锨，很少有大型網(wǎng)站使用這種布局（據(jù)說(shuō)的）
4.設(shè)置viewport進(jìn)行縮放
天貓的web app的首頁(yè)就是采用這種方式去做的，以320寬度為基準(zhǔn)碌秸，進(jìn)行縮放绍移，最大縮放為320*1.3 = 416，基本縮放到416都就可以兼容iphone6 plus的屏幕了讥电，這個(gè)方法簡(jiǎn)單粗暴蹂窖，又高效。說(shuō)實(shí)話我覺得他和用接下去我們要講的rem都非常高效恩敌，不過(guò)有部分同學(xué)使用過(guò)程中反應(yīng)縮放會(huì)導(dǎo)致有些頁(yè)面元素會(huì)糊的情況瞬测。
5.rem布局
rem是css3新引入的單位，在pc端會(huì)有兼容性的問題纠炮，對(duì)移動(dòng)端比較友好月趟。簡(jiǎn)而言之就是通過(guò)動(dòng)態(tài)設(shè)置html根元素的fontsize，等比縮放元素大小來(lái)自適應(yīng)移動(dòng)設(shè)備抗碰。
翻了很多資料狮斗，po也測(cè)試過(guò)最好用省事的就是rem布局 ，rem布局也有新舊版弧蝇，這里講最普用的阿里團(tuán)隊(duì)的高清方案,也是現(xiàn)在淘寶m端使用的解決方案碳褒。
以下是核心js代碼
! function(e) {
function t(a) {
if (i[a]) return i[a].exports;
var n = i[a] = {
exports: {},
id: a,
loaded: !1
};
return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
}
var i = {};
return t.m = e, t.c = i, t.p = "", t(0)
}([function(e, t) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var i = window;
t["default"] = i.flex = function(e, t) {
var a = e || 100,
n = t || 1,
r = i.document,
o = navigator.userAgent,
d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
l = o.match(/U3\/((\d+|\.){5,})/i),
c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
s = i.devicePixelRatio || 1;
p || d && d[1] > 534 || c || (s = 1);
var u = 1 / s,
m = r.querySelector('meta[name="viewport"]');
m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
}, e.exports = t["default"]
}]);
flex(100, 1);
代碼原理：
1.根據(jù)設(shè)備屏幕的DPR（設(shè)備像素比，比如dpr=2時(shí)看疗，表示1個(gè)CSS像素由2X2個(gè)物理像素點(diǎn)組成） 動(dòng)態(tài)設(shè)置 html 的font-size
2.同時(shí)根據(jù)設(shè)備DPR調(diào)整頁(yè)面的縮放值沙峻，進(jìn)而達(dá)到高清效果。
方案優(yōu)勢(shì):
1.引用簡(jiǎn)單两芳，布局簡(jiǎn)便(只要把js代碼貼到head標(biāo)簽里面,就可以使用了,設(shè)計(jì)稿一般是640 或者750的,不需要進(jìn)行單位換算,直接用設(shè)計(jì)稿的尺寸就可以,比如設(shè)計(jì)稿上有一個(gè)btn的高度為80px,寬度為120px,高清方案默認(rèn)1rem=100px,那么 btn的寬度就設(shè)置為:)
.btn {
width:0.8rem
height:1.2rem
}
2.根據(jù)設(shè)備屏幕的DPR,自動(dòng)設(shè)置最合適的高清縮放摔寨。保證了不同設(shè)備下視覺體驗(yàn)的一致性。
舊方案怖辆，屏幕越大是复，元素也越大删顶，新方案，屏幕越大淑廊，看到的越多
看得越多的理解：
比如逗余，一篇很長(zhǎng)的文章在ip4上，一屏盛不了那么多內(nèi)容季惩，而在ip6plus上录粱，可以全部看清楚，這是因?yàn)榛埃路桨笗?huì)根據(jù)dpr來(lái)縮放視口啥繁，大屏小屏的手機(jī)上，顯示的字體大小都是一致的青抛，當(dāng)然在大屏上看到的東西就多咯～
3.有效解決移動(dòng)端真實(shí)1px問題（這里的1px 是設(shè)備屏幕上的物理像素）
注意
并不是所有用px的地方都要用rem旗闽，rem布局只針對(duì)固定寬度。
依需求而定脂凶，比如淘寶頁(yè)面底下的tabar宪睹，和頭部搜索區(qū)域，都是用百分比來(lái)布局的蚕钦，或者flex和模型，當(dāng)在ipad上打開的時(shí)候就可以看見鹅很，頭部和tab是撐滿全屏的嘶居。
中間的主要內(nèi)容（最外部的容器）要設(shè)置一個(gè)max-width，demo設(shè)置的是max-width：10rem促煮，這里我不太明白為什么要設(shè)置成10rem邮屁，有弄明白的小伙伴希望能告訴我。謝謝（已解決菠齿，和設(shè)置最外層寬度為100%是一樣的道理佑吝，10rem 可以適配到所有手機(jī)設(shè)備。1000%可以適配ipad绳匀，demo試試就知道了）
（應(yīng)用了此方案芋忿，不管設(shè)計(jì)圖多寬（當(dāng)然，一般寬度為750疾棵，640也可以）戈钢，最外層的div寬度設(shè)為100%就行，然后就可以愉快的布局了是尔，不會(huì)出現(xiàn)你說(shuō)的白邊的情況殉了。）
對(duì)于尺寸比較大的元素，應(yīng)該考慮用百分比拟枚。rem做單位的元素在哪種設(shè)備下都是固定大小薪铜，這點(diǎn)必須牢記Ｖ诠！
可能遇到的問題
1.問：為啥手機(jī)網(wǎng)頁(yè)效果圖寬度是要640或者750的隔箍，我非得弄個(gè)666的不行咩谓娃？
答：老實(shí)說(shuō)當(dāng)然可以，不過(guò)為了規(guī)范鞍恢，640或者750是相對(duì)合適的傻粘。拿Iphone 5s 舉例，它的css像素寬度是320px帮掉，由于它的dpr=2弦悉，所以它的物理像素寬度為320 × 2 = 640px，這也就是為什么蟆炊，你在5s上截了一張圖稽莉，在電腦上打開，它的原始寬度是640px的原因涩搓。那 iphone 6 的截圖寬度呢污秆？ 375 × 2 = 750那 iphone 6 sp 的截圖寬度呢？ 414 × 3 = 1242以此類推昧甘，你現(xiàn)在能明白效果圖為什么一般是 640 良拼，750 甚至是 1242 的原因了么？（真沒有歧視安卓機(jī)的意思充边。庸推。。）
2.問：寬度用rem寫的情況下浇冰， 在 iphone6 上沒問題贬媒， 在 iphone5上會(huì)有橫向滾動(dòng)條，何解肘习？
答：假設(shè)你的效果圖寬度是750际乘，在這個(gè)效果圖上可能有一個(gè)寬度為7rem（高清方案默認(rèn) 1rem = 100px）的元素。我們知道漂佩，高清方案的特點(diǎn)就是幾乎完美還原效果圖脖含，也就是說(shuō)，你寫了一個(gè)寬度為 7rem 的元素仅仆，那么在目前主流移動(dòng)設(shè)備上都是7rem器赞。然而，iphone 5 的寬度為640墓拜，也就是6.4rem港柜。于是橫向滾動(dòng)條不可避免的出現(xiàn)了。怎么辦呢？ 這是我目前推薦的比較安全的方式：如果元素的寬度超過(guò)效果圖寬度的一半（效果圖寬為640或750）夏醉，果斷使用百分比寬度爽锥，或者flex布局。就像把等屏寬的圖片寬度設(shè)為100%一樣畔柔。
3.問：不是 1rem = 100px嗎氯夷，為什么我的代碼寫了一個(gè)寬度為3rem的元素，在電腦端的谷歌瀏覽器上寬度只有150px?
答：先說(shuō)高清方案代碼靶擦，再次強(qiáng)調(diào)咱們的高清方案代碼是根據(jù)設(shè)備的dpr動(dòng)態(tài)設(shè)置html 的 font-size腮考，如果dpr=1(如電腦端），則html的font-size為50px玄捕，此時(shí) 1rem = 50px如果dpr=2(如iphone 5 和 6）踩蔚，則html的font-size為100px，此時(shí) 1rem = 100px如果dpr=3(如iphone 6 sp）枚粘，則html的font-size為150px馅闽，此時(shí) 1rem = 150px如果dpr為其他值，即便不是整數(shù)馍迄，如3.4 , 也是一樣直接將dpr 乘以 50 福也。
再來(lái)說(shuō)說(shuō)效果圖，一般來(lái)講攀圈，我們的效果圖寬度要么是640暴凑，要么是750，無(wú)論哪一個(gè)赘来，它們對(duì)應(yīng)設(shè)備的dpr=2搬设，此時(shí)，1 rem = 50 × 2 = 100px撕捍。這也就是為什么高清方案默認(rèn)1rem = 100px。而將1rem默認(rèn)100px也是好處多多泣洞，可以幫你快速換算單位忧风，比如在750寬度下的效果圖，某元素寬度為53px球凰，那么css寬度直接設(shè)為53/100=0.53rem了狮腿。
然而極少情況下，有設(shè)計(jì)師將效果圖寬定為1242px呕诉，因?yàn)樗掷镏挥幸粋€(gè)iphone 6 sp (dpr = 3)缘厢，設(shè)計(jì)完效果圖剛好可以在他的iphone 6 sp里查看調(diào)整。一切完畢之后甩挫，他將這個(gè)效果圖交給你來(lái)切圖贴硫。由于這個(gè)效果圖對(duì)應(yīng)設(shè)備的dpr=3，也就是1rem = 50 × 3 = 150px。所以如果你量取了一個(gè)寬度為90px的元素英遭，它的css寬度應(yīng)該為 90/150=0.6rem间护。由于咱們的高清方案默認(rèn)1rem=100px，為了還原效果圖挖诸，你需要這樣換算汁尺。當(dāng)然，一個(gè)技巧就是你可以直接修改咱們的高清方案的默認(rèn)設(shè)置多律。在代碼的最后 你會(huì)看到 flex(100, 1) 痴突，將其修改成flex(66.66667, 1)就不用那么麻煩的換算了，此時(shí)那個(gè)90px的直接寫成0.9rem就可以了狼荞。
4.問：高清方案在微信上辽装，有時(shí)候字體會(huì)不受控制變的很大，怎么辦粘秆？
答：參考
5.問：我在底部導(dǎo)航用的flex感覺更合適一些如迟，請(qǐng)問這樣子混著用可以嗎？
答：咱們的rem適合寫固定尺寸攻走。其余的根據(jù)需要換成flex或者百分比殷勘。源碼示例中就有這三種的綜合運(yùn)用。
6.問：在高清方案下昔搂，一個(gè)標(biāo)準(zhǔn)的玲销，較為理想的寬度為640的頁(yè)面效果圖應(yīng)該是怎樣的？
7.這個(gè)會(huì)和bootstrap沖突摘符。
解決辦法：
1贤斜，將bootstrap 中，凡是用到px的單位一律換成rem
2逛裤，如果你有使用webpack瘩绒，建議使用將css轉(zhuǎn)成rem的包（postcss-pxtorem）將自動(dòng)完成第一步的操作。
8.@2x和@3x的圖片還要判斷不同的dpr下用不同的圖片带族。
Normalize.css 是一個(gè)可以定制的CSS文件锁荔，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一。
Normalize.css 能干什么：
保留有用的默認(rèn)值蝙砌，不同于許多 CSS 的重置
標(biāo)準(zhǔn)化的樣式阳堕，適用范圍廣的元素。
糾正錯(cuò)誤和常見的瀏覽器的不一致性择克。
一些細(xì)微的改進(jìn)恬总，提高了易用性。
使用詳細(xì)的注釋來(lái)解釋代碼肚邢。
支持的瀏覽器：
Google Chrome (latest)
Mozilla Firefox (latest)
Mozilla Firefox ESR
Opera (latest)
Apple Safari 6+
Internet Explorer 8+
