第132天：移動web端-rem布局（進階）

rem布局（進階版）

      該方案使用相當簡單，把下面這段已壓縮過的 原生JS（僅1kb，源碼已在文章底部更新，2017/5/3） 放到 HTML 的 head 标簽中即可（注:不要手動設定viewport，該方案自動幫你設定），此方案僅适用于移動端web

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(normal,e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=normal?1:1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=normal?"50px": a/2*s*n+"px"},e.exports=t["default"]}]);  flex(false,100, 1);</script>      

代碼原理

這是阿裡團隊的高清方案布局代碼，所謂高清方案就是根據裝置螢幕的DPR（裝置像素比，又稱DPPX，比如dpr=2時，表示1個CSS像素由4個實體像素點組成）** 動态設定 html 的font-size, 同時根據裝置DPR調整頁面的縮放值，進而達到高清效果**。

有何優勢

• 引用簡單，布局簡便
• 根據裝置螢幕的DPR,自動設定最合适的高清縮放。
• 保證了不同裝置下視覺體驗的一緻性。（老方案是，螢幕越大元素越大；此方案是，螢幕越大，看的越多）
• 有效解決移動端真實1px問題（這裡的1px 是裝置螢幕上的實體像素）

如何使用

絕不是每個地方都要用rem，rem隻适用于固定尺寸！

在相當數量的布局情境中（比如底部導航元素平分螢幕寬，大尺寸元素），你必須使用百分比或者flex才能完美布局！

此方案也是預設 1rem = 100px，是以你布局的時候，完全可以按照設計師給你的效果圖寫各種尺寸啦。

比如你在效果圖上量取的某個按鈕元素長 55px, 寬37px ，那你直接可以這樣寫樣式：

.myBtn {
   width: 0.55rem;
   height: 0.37rem;
}      

下面是源碼和Demo

實踐應用1（請在手機端或者手機模式下浏覽效果更佳！）

實踐應用2（請在手機端或者手機模式下浏覽效果更佳！）

示例源碼

線上Demo

常見問題說明

1.問：為啥手機網頁效果圖寬度是要640或者750的，我非得弄個666的不行？

答：老實說當然可以，不過為了規範，640或者750是相對合适的。

拿Iphone 5s 舉例，它的css像素寬度是320px，由于它的dpr=2，是以它的實體像素寬度為320 × 2 = 640px，這也就是為什麼，你在5s上截了一張圖，在電腦上打開，它的原始寬度是640px的原因。

那 iphone 6 的截圖寬度呢？ 375 × 2 = 750

那 iphone 6 sp 的截圖寬度呢？ 414 × 3 = 1242

以此類推，你現在能明白效果圖為什麼一般是 640 ，750 甚至是 1242 的原因了麼？

2.問：寬度用rem寫的情況下， 在 iphone6 上沒問題， 在 iphone5上會有橫向滾動條，何解？

答：假設你的效果圖寬度是750，在這個效果圖上可能有一個寬度為7rem（高清方案預設 1rem = 100px）的元素。我們知道，高清方案的特點就是幾乎完美還原效果圖，也就是說，你寫了一個寬度為 7rem 的元素，那麼在目前主流移動裝置上都是7rem。然而，iphone 5 的寬度為640，也就是6.4rem。于是橫向滾動條不可避免的出現了。

怎麼辦呢？ 這是我目前推薦的比較安全的方式：如果元素的寬度超過效果圖寬度的一半（效果圖寬為640或750），果斷使用百分比寬度，或者flex布局。就像把等屏寬的圖檔寬度設為100%一樣。

3.問：不是 1rem = 100px嗎，為什麼我的代碼寫了一個寬度為3rem的元素，在電腦端的谷歌浏覽器上寬度隻有150px?

答：先說高清方案代碼，再次強調咱們的高清方案代碼是根據裝置的dpr動态設定html 的 font-size，

如果dpr=1(如電腦端），則html的font-size為50px，此時 1rem = 50px

如果dpr=2(如iphone 5 和 6），則html的font-size為100px，此時 1rem = 100px

如果dpr=3(如iphone 6 sp），則html的font-size為150px，此時 1rem = 150px

如果dpr為其他值，即便不是整數，如3.4 , 也是一樣直接将dpr 乘以 50 。

再來說說效果圖，一般來講，我們的效果圖寬度要麼是640，要麼是750，無論哪一個，它們對應裝置的dpr=2，此時，1 rem = 50 × 2 = 100px。這也就是為什麼高清方案預設1rem = 100px。而将1rem預設100px也是好處多多，可以幫你快速換算機關，比如在750寬度下的效果圖，某元素寬度為53px，那麼css寬度直接設為53/100=0.53rem了。

然而極少情況下，有設計師将效果圖寬定為1242px，因為他手裡隻有一個iphone 6 sp (dpr = 3)，設計完效果圖剛好可以在他的iphone 6 sp裡檢視調整。一切完畢之後，他将這個效果圖交給你來切圖。由于這個效果圖對應裝置的dpr=3，也就是1rem = 50 × 3 = 150px。是以如果你量取了一個寬度為90px的元素，它的css寬度應該為 90/150=0.6rem。由于咱們的高清方案預設1rem=100px，為了還原效果圖，你需要這樣換算。當然，一個技巧就是你可以直接修改咱們的高清方案的預設設定。在代碼的最後 你會看到 flex(false, 100, 1) ，将其修改成flex(false, 66.66667, 1)就不用那麼麻煩的換算了，此時那個90px的直接寫成0.9rem就可以了。

4.問：在此方案下，我如果引用了别的UI庫，那些UI庫的元素會顯得特别小，如何解決？

答：可以這樣去了解問題的原因，如果不用高清方案，别的UI庫的元素在移動裝置上（假設這個裝置是iphone 5好了）顯示是正常的，這沒有問題，然後我們在這個裝置上将該頁面截圖放到電腦上看，發現寬度是640（問答1解釋過了），根據你的像素眼大緻測量，你發現這個裝置上的某個字型大小應該是12px，而你在電腦上測量應該是24px。

現在我們使用高清方案去還原這個頁面，那麼字型大小應該寫為 0.24rem 才對！

是以，如果你引用了其他的UI庫，為了相容高清方案，你需要對該UI庫裡凡是應用px的地方做相應處理，即： a px => a*0.02 rem

(具體處理方式因人而異，有子產品化開發經驗的同學可使用類似的 px2rem 的插件去轉化，也可以完全手動處理）

然而真實情況往往更為複雜，比如，你引入了百度地圖（N個樣式需要處理轉換）；或者你引入了一個

framework；又或者你使用了 video 标簽，上面預設的尺寸樣式很難處理。等等這些棘手問題

面對這些情況，此時我們的高清方案如果不再壓縮頁面，那麼以上問題将迎刃而解。

基于這樣的思路，筆者對高清方案的源碼做了如下修改，即添加一個叫做 normal 的參數，由它來控制頁面是否壓縮。

在文章頂部代碼的最後，你會看到

flex(false, 100, 1)

，預設情況下頁面是開啟壓縮的。

如果你需要禁止壓縮，由于我們的源碼執行後，直接将flex函數挂載到全局變量window上了，此時你直接在需要禁止壓縮的頁面執行

window.flex(true)

就可以了，而rem的用法保持不變。

有一點美中不足的是，如果禁止了頁面壓縮，高清屏的1像素就不能實作了，如果你必須要實作1像素，那麼自行谷歌：css 0.5像素，有N多的解決方案，這裡不再贅述。

5.問：有時候字型會不受控制的變大，怎麼辦？

答：在X5新核心Blink中，在排版頁面的時候，會主動對字型進行放大，會檢測頁面中的主字型，當某一塊字型在我們的判定規則中，認為字号較小，并且是頁面中的主要字型，就會采取主動放大的操作。然而這不是我們想要的，可以采取給最大高度解決

解決方案：

*, *:before, *:after { max-height: 100000px }      

補充：有同學反映，在一些情況下

textarea

标簽内的字型大小即便加上上面的方案，字型也會變大，無法控制。此時你需要給

textarea

的

display

設為

table

或者

inline-table

即可恢複正常。

6.問：我在底部導航用的flex感覺更合适一些，請問這樣子混着用可以嗎？

答：咱們的rem适合寫固定尺寸。其餘的根據需要換成flex或者百分比。源碼示例中就有這三種的綜合運用。

7.問：在高清方案下，一個标準的，較為理想的寬度為640的頁面效果圖應該是怎樣的？

點選浏覽：一個标準的640手機頁面設計稿參考

（沒錯，在此方案中，你可以完全按照這張設計稿的尺寸寫布局了。就是這麼簡單！）

8.問：用了這個方案如何使用媒體查詢呢？

一般來講，使用了這個方案是沒必要用媒體查詢了，

9.問：可以提供下這個高清方案的源碼嗎？

1 'use strict';
 2 
 3 /**
 4  * @param {Boolean} [normal = false] - 預設開啟頁面壓縮以使頁面高清;  
 5  * @param {Number} [baseFontSize = 100] - 基礎fontSize, 預設100px;
 6  * @param {Number} [fontscale = 1] - 有的業務希望能放大一定比例的字型;
 7  */
 8 const win = window;
 9 export default win.flex = (normal, baseFontSize, fontscale) => {
10   const _baseFontSize = baseFontSize || 100;
11   const _fontscale = fontscale || 1;
12 
13   const doc = win.document;
14   const ua = navigator.userAgent;
15   const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
16   const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
17   const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
18   const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
19   let dpr = win.devicePixelRatio || 1;
20   if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
21     // 如果非iOS, 非Android4.3以上, 非UC核心, 就不執行高清, dpr設為1;
22     dpr = 1;
23   }
24   const scale = normal ? 1 : 1 / dpr;
25 
26   let metaEl = doc.querySelector('meta[name="viewport"]');
27   if (!metaEl) {
28     metaEl = doc.createElement('meta');
29     metaEl.setAttribute('name', 'viewport');
30     doc.head.appendChild(metaEl);
31   }
32   metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
33   doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
34 };      

10.問：我在使用 rem 布局進階方案的時候遇到了XXX的問題，如何解決？

• 此方案久經考驗，具有普遍适用性，自身出緻命問題的情況很少，至少筆者是沒遇到過。
• 絕大多數你遇到的問題，都是由于對rem布局了解不到位導緻的。