Web前端開發之響應式佈局(碼動未來)
Web前端開發之響應式佈局(碼動未來)
隨著移動裝置的普及,移動web在前端工程師們的工作中佔有越來越重要的位置。移動裝置更新速度頻繁,手機廠商繁多,導致的問題是每一臺機器的螢幕寬度和解析度不一樣。這給我們在編寫前端介面時增加了困難,適配問題在當下顯得越來越突出。記得剛剛開始開發移動端產品的時候向設計MM要了不同螢幕的設計圖,結果可想而知。本篇博文分享一些滷煮處理多螢幕自適應的經驗,希望有益於諸君。
特別說明:在開始這一切之前,請開發移動介面的工程師們在頭部加上下面這條meta:
接下來我們可以根據根元素的字型大小用rem設定各種屬性的相對值。當然,如果是移動裝置,螢幕會有一個上下限制,我們可以控制解析度在某個範圍內,超過了該範圍,我們就不再增加根元素的字型大小了:
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + ‘px’;
一般的情況下,你是不需要考慮螢幕動態地拉伸和收縮。當然,假如使用者開啟了轉屏設定,在網頁載入之後改變了螢幕的寬度,那麼我們就要考慮這個問題了。解決此問題也很簡單,監聽螢幕的變化就可以做到動態切換元素樣式:
window.onresize = function(){
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + ‘px’;
};
為了提高效能,讓程式碼開起來更加完美,可以為它加上節流閥函式:
window.onresize = _.debounce(function() {
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + ‘px’;
}, 50);
順帶解決高保真標註與實際開發值比例問題
如果你們設計稿標準是iphone5,那麼拿到設計稿的時候一定會發現,完全不能按照高保真上的標註來寫css,而是將各個值取半,這是因為移動裝置解析度不一樣。設計師們是在真實的iphone5機器上做的標註,而iphone5系列的解析度是640,實際上我們在開發只需要按照320的標準來。為了節省時間,不至於每次都需要將標註取半,我們可以將整個網頁縮放比例,模擬提高解析度。這個做法很簡單,為不同的裝置設定不同的meta即可:
var scale = 1 / devicePixelRatio;
document.querySelector(‘meta[name=“viewport”]’).setAttribute(‘content’, ‘initial-scale=’ + scale + ‘, maximum-scale=’ + scale + ‘, minimum-scale=’ + scale + ‘, user-scalable=no’);
這樣設定同樣可以解決在安卓機器下1px畫素看起來過粗的問題,因為在畫素為1px的安卓下機器下,邊框的1px被壓縮成了0.5px了。總之是一勞永逸!淘寶和網易新聞的手機web端就是採用以上這種方式,自適應各種裝置螢幕的,大家有興趣可以去參考參考。下面是完整的程式碼:
@media screen and (device-width: 750px) { /iphone6/
html {
font-size: 117.188px;
}
}
@media screen and (device-width: 1240px) { /iphone6s/
html {
font-size: 194.063px;
}
}
這種方式也是可行的,缺點是靈活性不高,取每個裝置的精確值需要自己去計算,所以只能取範圍值。考慮裝置螢幕眾多,解析度也參差不齊,把每一種機型的css程式碼寫出來是不太可能的。但是它也有優點,就是無需監聽瀏覽器的視窗變化,它會跟隨螢幕動態變化。媒體查詢的用法當然不僅僅像在此處這麼簡單,相對於第二種自適應來說有很多地方是前者所遠遠不及的。最明顯的就是它可以根據不同裝置顯示不同的佈局樣式!請注意,這裡已經不是改變字型和高度那麼簡單了,它直接改變的是佈局樣式!
@media screen and (min-width: 320px) and (max-width: 650px) { /手機
.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;
}
}
此種自適應佈局一般常用在相容PC和手機裝置,由於螢幕跨度很大,介面的元素以及遠遠不是改改大小所能滿足的。這時候需要重新設計整介面的佈局和排版了:
如果螢幕寬度大於1300畫素
如果螢幕寬度在600畫素到1300畫素之間,則6張圖片分成兩行。
許多css框架經常用到這樣的多端解決方案,著名的bootstrap就是採用此種方式進行柵格佈局的。
不管哪一種自適應方式,我們的目的是使得開發網頁在各種螢幕下變得好看:如果你的專案定位的使用者群僅僅是使用某種機型的人,那麼可以採用第一種自適應方式。如果你的客戶主要是移動端,但是客戶的裝置型別龐雜,建議採用第二種方式。如果你雄心勃勃地需要建立一套相容PC、PAD、mobile多端的一體化web應用,那麼第三種選擇顯然是最適合你的。每種方式都有自己的利弊,根據需求權衡利害,合理地實現自適應佈局,需要不停的實踐和摸索。
QQ技術交流群:815302226