Web前端開發(fā)之響應(yīng)式布局（碼動(dòng)未來）
隨著移動(dòng)設(shè)備的普及淫茵，移動(dòng)web在前端工程師們的工作中占有越來越重要的位置锐秦。移動(dòng)設(shè)備更新速度頻繁谊路，手機(jī)廠商繁多碉克，導(dǎo)致的問題是每一臺(tái)機(jī)器的屏幕寬度和分辨率不一樣。這給我們在編寫前端界面時(shí)增加了困難赁还，適配問題在當(dāng)下顯得越來越突出妖泄。記得剛剛開始開發(fā)移動(dòng)端產(chǎn)品的時(shí)候向設(shè)計(jì)MM要了不同屏幕的設(shè)計(jì)圖，結(jié)果可想而知艘策。本篇博文分享一些鹵煮處理多屏幕自適應(yīng)的經(jīng)驗(yàn)蹈胡，希望有益于諸君。
特別說明：在開始這一切之前朋蔫，請開發(fā)移動(dòng)界面的工程師們在頭部加上下面這條meta:
<meta?name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
簡單事情簡單做-寬度自適應(yīng)
所謂寬度自適應(yīng)嚴(yán)格來說是一種PC端的自適應(yīng)布局方式在移動(dòng)端的延伸罚渐。在處理PC端的前端界面時(shí)候需要用到全屏布局時(shí)采用的就是此種布局方式。它的實(shí)現(xiàn)方式也比較簡單驯妄，將外層容器元素按照百分比鋪滿地方式荷并，里面的子元素固定或者左右浮動(dòng)。?
.div {??width:100%;?height:100px;}.child {??float:?left;?}.child {??float:right;}
由于父級元素采用百分比的布局方式青扔，隨著屏幕的拉伸源织，它的寬度會(huì)無限的拉伸翩伪。而子元素由于采用了浮動(dòng)，那么它們的位置也會(huì)固定在兩端雀鹃。該寬度自適應(yīng)在新的時(shí)代有了新的方法幻工，隨著彈性布局的普及，它經(jīng)常被flex或者box這樣的伸縮性布局方式替代黎茎，變得越來越“彈性”十足囊颅。需要了解彈性布局，請前往Flex布局教程和鹵煮box布局教程比較傅瞻。
大小之辨-完全自適應(yīng)
“完全自適應(yīng)式”是小編對越此方案的叫法踢代，由于小編現(xiàn)在找不到官方名稱，所以暫時(shí)就這樣叫它嗅骄。這種解決方案相對前一種來說進(jìn)步不少胳挎，不僅僅寬度實(shí)現(xiàn)了自適應(yīng)，而且界面所有的元素大小和高度都會(huì)根據(jù)不同分辨率和屏幕寬度的設(shè)備來調(diào)整元素溺森、字體慕爬、圖片、高度等屬性的值屏积。簡單來說就是在不同的屏幕下医窿，你看到的字體和元素高寬度的大小是不一樣的。在這里炊林，有人就會(huì)說利用的是媒體查詢屬性姥卢，根據(jù)不同的屏幕寬度，調(diào)整樣式渣聚。小編之前也是這樣想的独榴，但是你需要考慮到界面上的許多元素需要設(shè)置字體，如果用media query為每個(gè)元素在不同的設(shè)備下都設(shè)置不同的屬性的話奕枝，那么有多少種屏幕我們的css就會(huì)增加多少倍棺榔。實(shí)際上在這里，我們采用的是js和css屬性rem來解決這個(gè)問題的隘道。
REM屬性指的是相對于根元素設(shè)置某個(gè)元素的字體大小掷豺。它同時(shí)也可以用作為設(shè)置高度等一系列可以用px來標(biāo)注的單位。
html {
?font-size: 10px;
}
div {
?font-size: 1rem;
?height: 2rem;
?width: 3rem;
?border: .1rem solid #000;
}
采用以上寫法薄声，div繼承到了html節(jié)點(diǎn)的font-size，為本身定義了一系列樣式屬性题画，此時(shí)1em計(jì)算為10px默辨，即根節(jié)點(diǎn)的font-size值。所以苍息，這時(shí)div的高度就是20px缩幸，寬度是30px壹置，邊框是1px，字體大小則是10px表谊；一旦有了這樣的方法钞护，我們自然可以根據(jù)不同的屏幕寬度設(shè)置不同的根節(jié)點(diǎn)字體大小。假設(shè)我們現(xiàn)在設(shè)計(jì)的標(biāo)準(zhǔn)是iphone5s爆办，iphone5系列的屏幕分辨率是640难咕。為了統(tǒng)一規(guī)范，我們將iphone5 分辨率下的根元素font-size設(shè)置為100px;
<!--iphone5-->html {?font-size:?100px;}
那么以此為基準(zhǔn)距辆，可以計(jì)算出一個(gè)比例值6.4余佃。我們可以得知其他手機(jī)分辨率的設(shè)備下根元素字體大小:
/*數(shù)據(jù)計(jì)算公式
640/100 = device-width / x可以設(shè)置其他設(shè)備根元素字體大小
iphone5: 640： 100
iphone6: 750 : 117
iphone6s: 1240 : 194*/
var?deviceWidth = window.documentElement.clientWidth;document.documentElement.style.fontSize = (deviceWidth / 6.4) +?'px';
在head中，我們將以上代碼加入跨算，動(dòng)態(tài)地改變根節(jié)點(diǎn)的font-size值爆土，得到如下結(jié)果:
接下來我們可以根據(jù)根元素的字體大小用rem設(shè)置各種屬性的相對值。當(dāng)然诸蚕，如果是移動(dòng)設(shè)備步势，屏幕會(huì)有一個(gè)上下限制，我們可以控制分辨率在某個(gè)范圍內(nèi)背犯，超過了該范圍坏瘩，我們就不再增加根元素的字體大小了:
var?deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) +?'px';
一般的情況下，你是不需要考慮屏幕動(dòng)態(tài)地拉伸和收縮媳板。當(dāng)然桑腮，假如用戶開啟了轉(zhuǎn)屏設(shè)置，在網(wǎng)頁加載之后改變了屏幕的寬度蛉幸，那么我們就要考慮這個(gè)問題了破讨。解決此問題也很簡單，監(jiān)聽屏幕的變化就可以做到動(dòng)態(tài)切換元素樣式:
window.onresize =?function(){
??????var?deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
??????document.documentElement.style.fontSize = (deviceWidth / 6.4) +?'px';
?};
為了提高性能奕纫，讓代碼開起來更加完美提陶，可以為它加上節(jié)流閥函數(shù):
window.onresize = _.debounce(function() {
??????var?deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
??????document.documentElement.style.fontSize = (deviceWidth / 6.4) +?'px';
}, 50);
順帶解決高保真標(biāo)注與實(shí)際開發(fā)值比例問題
如果你們設(shè)計(jì)稿標(biāo)準(zhǔn)是iphone5，那么拿到設(shè)計(jì)稿的時(shí)候一定會(huì)發(fā)現(xiàn)匹层，完全不能按照高保真上的標(biāo)注來寫css隙笆，而是將各個(gè)值取半，這是因?yàn)橐苿?dòng)設(shè)備分辨率不一樣升筏。設(shè)計(jì)師們是在真實(shí)的iphone5機(jī)器上做的標(biāo)注撑柔，而iphone5系列的分辨率是640，實(shí)際上我們在開發(fā)只需要按照320的標(biāo)準(zhǔn)來您访。為了節(jié)省時(shí)間铅忿，不至于每次都需要將標(biāo)注取半，我們可以將整個(gè)網(wǎng)頁縮放比例灵汪，模擬提高分辨率檀训。這個(gè)做法很簡單柑潦，為不同的設(shè)備設(shè)置不同的meta即可:
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
這樣設(shè)置同樣可以解決在安卓機(jī)器下1px像素看起來過粗的問題，因?yàn)樵谙袼貫?px的安卓下機(jī)器下峻凫，邊框的1px被壓縮成了0.5px了渗鬼。總之是一勞永逸荧琼！淘寶和網(wǎng)易新聞的手機(jī)web端就是采用以上這種方式譬胎，自適應(yīng)各種設(shè)備屏幕的，大家有興趣可以去參考參考铭腕。下面是完整的代碼:
<!DOCTYPE?html>
<html>
<head> ?
測試</title>?
<meta?name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />??
<script?type="text/javascript">
(function() {??/
/ deicePixelRatio：設(shè)備像素??
var scale = 1 / devicePixelRatio;??//設(shè)置meta 壓縮界面 模擬設(shè)備的高分辨率?
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');??//debounce為節(jié)流函數(shù)银择，自己實(shí)現(xiàn)±巯希或者引入underscoure即可浩考。?
?var reSize = _.debounce(function() {??????
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;??????//按照640像素下字體為100px的標(biāo)準(zhǔn)來，得到一個(gè)字體縮放比例值 6.4??????
????document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';??}, 50);???window.onresize = reSize;})();??
</script>??
<style?type="text/css">????
html {??????height: 100%;??????width: 100%;??????overflow: hidden;??????font-size: 16px;????}?????div {??????height: 0.5rem;??????widows: 0.5rem;??????border: 0.01rem solid #19a39e;????}?????........??
</style>??<body>????<div>????</div>??</body></html>
讓元素飛起來-媒體查詢
運(yùn)用css新屬性media query 特性也可以實(shí)現(xiàn)我們上說到過的布局樣式被盈。為尺寸設(shè)置根元素字體大小:
@media screen and (device-width: 640px) {?/*iphone4/iphon5*/
??????html {
????????font-size: 100px;
??????}
????}
@media screen and (device-width: 750px) {?/*iphone6*/
??????html {
????????font-size: 117.188px;
??????}
????}@media screen and (device-width: 1240px) {?/*iphone6s*/
??????html {
????????font-size: 194.063px;
??????}
????}
這種方式也是可行的析孽，缺點(diǎn)是靈活性不高，取每個(gè)設(shè)備的精確值需要自己去計(jì)算只怎，所以只能取范圍值袜瞬。考慮設(shè)備屏幕眾多身堡，分辨率也參差不齊邓尤，把每一種機(jī)型的css代碼寫出來是不太可能的。但是它也有優(yōu)點(diǎn)贴谎，就是無需監(jiān)聽瀏覽器的窗口變化汞扎，它會(huì)跟隨屏幕動(dòng)態(tài)變化。媒體查詢的用法當(dāng)然不僅僅像在此處這么簡單擅这，相對于第二種自適應(yīng)來說有很多地方是前者所遠(yuǎn)遠(yuǎn)不及的澈魄。最明顯的就是它可以根據(jù)不同設(shè)備顯示不同的布局樣式！請注意仲翎，這里已經(jīng)不是改變字體和高度那么簡單了痹扇，它直接改變的是布局樣式！
@media screen and (min-width: 320px) and (max-width: 650px) { /*手機(jī)*/
? .class {
? ? float: left;
? }
}
@media screen and (min-width: 650px) and (max-width: 980px) { /*pad*/
? .class {
? ? float: right;
? }
}
@media screen and (min-width: 980px) ?and (max-width: 1240px) { /*pc*/
? .class {
? ? float: clear;
? }
}
此種自適應(yīng)布局一般常用在兼容PC和手機(jī)設(shè)備溯香，由于屏幕跨度很大鲫构，界面的元素以及遠(yuǎn)遠(yuǎn)不是改改大小所能滿足的。這時(shí)候需要重新設(shè)計(jì)整界面的布局和排版了:
如果屏幕寬度大于1300像素
如果屏幕寬度在600像素到1300像素之間玫坛，則6張圖片分成兩行芬迄。
許多css框架經(jīng)常用到這樣的多端解決方案，著名的bootstrap就是采用此種方式進(jìn)行柵格布局的。
不管哪一種自適應(yīng)方式禀梳，我們的目的是使得開發(fā)網(wǎng)頁在各種屏幕下變得好看：如果你的項(xiàng)目定位的用戶群僅僅是使用某種機(jī)型的人，那么可以采用第一種自適應(yīng)方式肠骆。如果你的客戶主要是移動(dòng)端算途，但是客戶的設(shè)備類型龐雜，建議采用第二種方式蚀腿。如果你雄心勃勃地需要建立一套兼容PC嘴瓤、PAD、mobile多端的一體化web應(yīng)用莉钙，那么第三種選擇顯然是最適合你的廓脆。每種方式都有自己的利弊，根據(jù)需求權(quán)衡利害磁玉，合理地實(shí)現(xiàn)自適應(yīng)布局停忿，需要不停的實(shí)踐和摸索。
QQ技術(shù)交流群:815302226
