詳解H5 活動頁之行動端REM 佈局適配方法

拿到設計稿後，如何進行版面還原？

如果只需要做非精確的響應式設計，那麼使用媒體查詢來實現就OK 了。如果需要精確還原設計稿，則一般透過縮放來實現。常見方案有基於viewport 和基於rem 的縮放方案。

在行動端，可以透過viewport 縮放頁面大小比率達到目的。

簡單來說，即所有寬高像素與視覺稿輸出相同，然後透過頁面寬度與視覺稿的寬度比率，動態設定viewport。縮放方案核心程式碼參考：

 (function () { var docEl = document.documentElement; var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent); function setScale( ) { var pageScale = 1; if (window.top !== window) { return pageScale; } var width = docEl.clientWidth || 360; var height = docEl.clientHeight || 640; if (width / height >= 360 / 640) { // 高度優先pageScale = height }/ 640page; width / 360; } var content = 'width=' + 360 + ', initial-scale=' + pageScale + ', maximum-scale=' + pageScale + ', user-scalable=no'; document.getElementById('viewport').setAttribute('content' , content); window.pageScale = pageScale; } if (isMobile) { setScale(); } else { docEl.className += ' pc'; }})()

這種方案在我們去年的一次H5 活動頁設計中進行了相關實踐。

但如果希望PC 上也能顯示，由於沒有viewport 的縮放概念，只能以固定值來設定，這個效果就不太理想。

rem 佈局適配方案被提及的比較多，在各大互聯網企業產品中都有較為廣泛的應用。

簡單來說其方法為：

1. 依照設計稿與裝置寬度的比例，動態計算並設定html 根標籤的font-size 大小；
2. css 中，設計稿元素的寬、高、相對位置等取值，依同等比例換算為rem 為單位的值；
3. 設計稿中的字體使用px 為單位，透過媒體查詢稍作調整。

下面我們舉個例子來說明。

第一個問題是html 標籤的font-size 動態計算。這取決於如何約定換算比例，以頁面寬度十等份為例，核心程式碼參考：

 (function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // 取得目前視窗的寬度var width = _width || docEl.clientWidth; // docEl.getBoundingCldocRect(). width; // 大於1080px 按1080 if (width > 1080) { width = 1080; } var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; // 部分機型上的誤差、相容性處理var actualSize = win.getComputedStyle && parseFloat(win.getComputedStyle(docEl)[font-size]); if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / actualSize; style.fontSize = remScaled + 'px'; } } var timer; //函數節流function dbcRefresh() { clearTimeout(timer); timer = setTimeout(setFontSize, 100); } //視窗更新動態改變font-size WIN.addEventListener('resize', dbcRefresh, false); / /頁面顯示時計算一次WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false); setFontSize();})(window)

另外，對於全螢幕顯示的H5 活動頁，對寬高比例有所要求，此時應當做的調整。可以這樣來做：

 function adjustWarp(warpId = '#warp') { // if (window.isMobile) return; const $win = $(window); const height = $win.height(); let width = $win.width(); // 考慮導覽列情況if (width / height < 360 / 600) { return; } width = Math.ceil(height * 360 / 640); $(warpId).css({ height, width, postion: 'relative', top: 0, left: 'auto', margin: '0 auto' }); //重新計算rem window.setFontSize(width);}

依照這種縮放方法，幾乎在任何裝置上都可以實現等比縮放的精確佈局。

第二個問題是元素大小的值。

以設計稿寬度1080px 為例，我們將寬度分成10 等份以便於換算，那麼1rem = 1080 / 10 = 108px 。其換算方法為：

 const px2rem = function(px, rem = 108) { let remVal = parseFloat(px) / rem; if (typeof px === string && px.match(/px$/)) { remVal += 'rem'; } return remVal;}

例如，設計稿中有一個圖片大小為460x210 ，相對頁面位置top: 321px; left: 70; 。依照如上換算方式，得到該元素最終的css 樣式應為：

 .img_demo { position: absolute; background-size: cover; background-image: url('demo.png'); top: 2.97222rem; left: 0.64814rem; width: 4.25926rem; 0.64814rem; width: 4.25926rem;

透過以上方法，rem 佈局方案就實現了。但是手動計算rem 的取值顯然不切實際。

透過less/sass 預處理工具，我們只需要設定mixins 方法，然後依照設計稿的實際大小來取值。以less 為例，mixins 參考如下：

 // px 轉re​​m.px2rem(@px, @attr: 'width', @rem: 108rem) { @{attr}: (@px / @rem);}.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) { .px2rem(@top, top, @rem); .px2rem(@left, left, @rem); .px2rem(@width, width, @rem); .px2rem(@height, height, @rem);}

針對前文的範例元素，css 樣式可以這樣來寫：

 .img_demo { position: absolute; background-size: cover; background-image: url('demo.png'); .px2remTLWH(321, 70, 460, 210);}

這裡，寬和高可以直接透過設計稿輸出的圖片元素大小讀取到；top/left 的取值，可以透過在Photoshop 中移動參考線定位元素快速取得。

字體使用rem 等比縮放會出現顯示上的問題，只需要針對性使用媒體查詢設定幾種大小即可。

範例參考：

 // 字型回應式@media screen and (max-width: 321px) { body { font-size: 13px; }}@media screen and (min-width: 321px) and (max-width: 400px) { body { font -size: 14px; }}@media screen and (min-width: 400px) { body { font-size: 16px; }}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。