Flexible.js可伸縮布局實現方法詳解
阿里團隊開源的一個庫。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.(1rem相對于根節點的字體大小)。
假如一個元素的寬是160px,在平時，我們可以采用百分比可以做到自適應，假如使用響應式的話，可能需要設置多個，比如在320px，輸出80px，而在640px輸出160px等。而采用以上的方法，則只需要輸出2.5rem就能實現統一，如下表格：
設備寬度 320px 360px 414px 640px Html字體大小 32px 36px 41.4px 64px 實際輸出 1rem 1rem 1rem 1rem 設計稿縮放大小 80px 90px 103.5px 160px 實際輸出 2.5rem 2.5rem 2.5rem 2.5rem
以上的2.5rem是怎么得出的呢？
160/64（1rem的基數為64px）=2.5rem;按照官方的說法（750px舉例）
Flexible會將視覺稿分成100份（主要為了以后能更好的兼容vh和vw），而每一份被稱為一個單位a。同時1rem單位被認定為10a。針對我們這份視覺稿可以計算出：
1a = 7.5px1rem = 75px
那么我們這個示例的稿子就分成了10a，也就是整個寬度為10rem，<html>對應的font-size為75px：
這樣一來，對于視覺稿上的元素尺寸換算，只需要原始的px值除以rem基準值即可。例如此例視覺稿中的圖片，其尺寸是176px * 176px,轉換成為2.346667rem * 2.346667rem。
另外在使用這個來處理自適應的另一個坑就是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做計量單位。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備