rem自適應佈局-移動端自適應必備:flexible.js
由於移動端特殊性,本文講的是如何使用rem實現自適應,或叫rem響應式佈局,通過使用一個指令碼就可以rem自適應,不用再為各種裝置寬度不同而煩惱如何實現自適應的問題。
rem是相對於根元素,這樣就意味著,我們只需要在根元素確定一個px字號,則可以來算出元素的寬高。1rem=16px(瀏覽器html的畫素,可以設定這個基準值),假如瀏覽器的html設為64px,則下面的元素則1rem=64px來運算。
阿里團隊開源的一個庫。使用flexible.js輕鬆搞定各種不同的移動端裝置相容自適應問題。
實現方法:
通過js來調整html的字型大小,而在頁面中的製作稿則統一使用rem這個單位來製作。關鍵程式碼如下:
;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn('將根據已有的meta標籤來設定縮放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content' );
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,對於2和3的屏,用2倍的方案,其餘的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他裝置下,仍舊使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));
從上面的程式碼,主要是改變了dpx和document的font-size大小。大小為docEl.getBoundingClientRect().width / 10 + ‘px’;
假設我們的設計稿寬是640的,則html的字型大小則被設為64px.則相當於1rem=64px。
假如一個元素的寬是160px,在平時,我們可以採用百分比可以做到自適應,假如使用響應式的話,可能需要設定多個,比如在320px,輸出80px,而在640px輸出160px等。
而採用以上rem的方法,則只需要輸出2.5rem就能實現統一,如下表格:
以上的2.5rem是怎麼得出的呢?
160/64(1rem的基數為64px)=2.5rem;按照官方的說法(640px舉例)
Flexible會將視覺稿分成100份(主要為了以後能更好的相容vh和vw),而每一份被稱為一個單位a。同時1rem單位被認定為10a。針對我們這份視覺稿可以計算出:(設計稿為750px為例)
1a = 7.5px
1rem = 75px
那麼我們這個示例的稿子就分成了10a,也就是整個寬度為10rem,對應的font-size為75px:
這樣一來,對於視覺稿上的元素尺寸換算,只需要原始的px值除以rem基準值即可。例如此例視覺稿中的圖片,其尺寸是176px * 176px,轉換成為2.346667rem * 2.346667rem。
另外大漠還寫了一篇詳細的文章:使用Flexible實現手淘H5頁面的終端適配 裡面介紹了一個如何快速轉換rem為px的幾種方法,感興趣的童鞋可以去看看。
也可以看這篇文章:Sass函式功能——rem轉px
另外在使用這個來處理自適應的另一個坑就是css sprite,作者的建議是使用svg,或者icon font.或者base64等其他方案。
另外就是在dpr=2時,小圖片可能會出現模糊,建議以最大的圖片來切圖。
字型建議使用px
在作者的觀點中,是建議描述性的字型使用px,如果有slogan之類大於48px的,可以使用rem,由於使用rem在iPhone5和iPhone6中字型不同,可能出現13px和15px,點陣字型。
*
顯然,我們在iPhone3G和iPhone4的Retina屏下面,希望看到的文字字號是相同的。也就是說,我們不希望文字在Retina螢幕下變小,另外,我們希望在大屏手機上看到更多文字,以及,現在絕大多數的字型檔案都自帶一些點陣尺寸,通常是16px和24px,所以我們不希望出現13px和15px這樣的奇葩尺寸。
如此一來,就決定了在製作H5的頁面中,rem並不適合用到段落文字上。所以在Flexible整個適配方案中,考慮文字還是使用px作為單位。只不過使用[data-dpr]屬性來區分不同dpr下的文字字號大小。*
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 預設寫上dpr為1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
為了能更好的利於開發,在實際開發中,我們可以定製一個font-dpr()這樣的Sass混合巨集:
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
有了這樣的混合巨集之後,在開發中可以直接這樣使用:
@include font-dpr(16px);
當然這只是針對於描述性的文字,比如說段落文字。但有的時候文字的字號也需要分場景的,比如在專案中有一個slogan,業務方希望這個slogan能根據不同的終端適配。針對這樣的場景,完全可以使用rem給slogan做計量單位。