關於移動端rem的設定

考古羊發表於2018-10-21
REM

關於移動端rem的設定

最近才開始做移動端的專案，以前理論上的rem終於付諸於實踐了，hummmm……

rem相對於根元素的font-size進行計算，寫文記錄一下如何設定根元素使得我們能快速根據計算稿計算出最終對應的rem的值。

先給出結論公式——-公式：root = (裝置寬度 / 設計稿寬度) * 基準值

problem

如何從設計稿給的值就能簡單計算得出最終渲染rem的值。

（1）通常情況下，根root = 16px，所以1rem = 16px ======>
導致計算困難。例如有207px的設計稿，對應的rem = 207/16 ……（2）設計稿通常不會是我們裝置的大小，而是會設定成裝置的2倍稿或者是3倍稿。比如基於iphone6（375px）的設計稿大多是750px。我們在進行計算的時候需要把設計稿裡面的寬高除以對應的倍數，很麻煩。

solution

最終想要的效果是 設計稿的值 –>
簡單計算 —>
正確的rem

1.簡單計算: 現在的基準數是16，因此計算困難。我們想讓基準值完全由自己指定

2.正確的rem：即簡化之後得出的rem = 我們複雜計算得出的rem相等

確定上述兩個條件後，根據第二個條件列出等式（設y是設計稿上待計算的元素的寬度，設root 是根的font-size）

簡化後得出的最終rem = y / 基準值

簡化前得出的最終rem = (y * (裝置寬度 / 設計稿寬度)) / rooty / 基準值 = (y * (裝置寬度 / 設計稿寬度)) / root

化簡後得到最終公式

root = (裝置寬度 / 設計稿寬度) * 基準值

例： 裝置寬度為375，設計稿寬度750，你想計算rem的時候只需要把設計稿上的值直接➗100（基準值 = 100），那麼你把根元素的font-size設定為 350/750*100 = 50 即可。

給出兩段參考程式碼

我們在進行開發的時候把計算得出的root-font-size給到根html即可。

!function(n){ 
               var  e=n.document,                     t=e.documentElement,                     i=640,                     d=i/100,                     o="orientationchange"in n?"orientationchange":"resize",                     a=function(){ 
                        var n=t.clientWidth||320;
n>
720&
&
(n=720);
                         t.style.fontSize=n/d+"px"                     
  };
                     e.addEventListener&
&
(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))            
  }(window);
複製程式碼
//https://github.com/jieyou/rem_layout!function(a,b,c){function q(){var d=Math.min((o?e[h]().width:f.innerWidth)/(a/b),c);
d!=p&
&
(k.innerHTML="html{font-size:"+d+"px!important;
"+n+"
  }",p=d)
  }function r(){clearTimeout(l),l=setTimeout(q,500)
  }var l,d=document,e=d.documentElement,f=window,g="addEventListener",h="getBoundingClientRect",i="pageshow",j=d.head||d.getElementsByTagName("HEAD")[0],k=d.createElement("STYLE"),m="text-size-adjust:100%;
",n="-webkit-"+m+"-moz-"+m+"-ms-"+m+"-o-"+m+m,o=h in e,p=null;
a=a||320,b=b||16,c=c||32,j.appendChild(k),d[g]("DOMContentLoaded",q,!1),"on"+i in f?f[g](i,function(a){a.persisted&
&
r()
  },!1):f[g]("load",r,!1),f[g]("resize",r,!1),q()
  }(                    720, // 設定設計稿基準寬度                    36, // 設定開發時的被除數（見HOW TO USE第4步） 在設計稿基準寬度為320時最好設定為16（在在設計稿基準寬度為其他值時等比放大，如640時設定為32等）。因為瀏覽器預設的值就是16，這樣程式碼失效或尚未起效時，不會有佈局問題                    32 // 設定最大根元素font-size，請注意這是一個css畫素值，而非物理畫素值。它的作用是，當使用者用非常寬的螢幕（pad、pc）訪問頁面時，不至於使得根元素的font-size超過這個值，使得佈局非常難看。見圖“show/wide_max_rem.jpg”            );
複製程式碼

來源：https://juejin.im/post/5bcc7122e51d457a4f63143c#comment

相關文章