rem移動端適配

rem做爲一個低調的長度單位，因爲手機端網頁的興起，在屏幕適配中獲得重用。使用 rem 前端開發者能夠很方便的在各類屏幕尺寸下，經過等比縮放的方式達到設計圖要求的效果。

rem 的官方定義『The font size of the root element.』，即以根節點的字體大小做爲基準值進行長度計算。通常認爲網頁中的根節點是 html 元素，因此採用的方式也是經過設置 html 元素的 font-size 來作屏幕適配，但實際狀況真有這麼簡單嗎？

首先咱們來看看使用 rem 實現手機屏幕適配的經常使用方案。

以設計稿的寬度爲640px，即：designWidth = 640，同時設定在640px屏寬下 1rem=100px ;

    設置 1rem=100px 的優勢不言而喻。前端開發者在切圖、重構頁面的時候，經過直接位移小數點的方式，就能夠將UI圖中測量到的 px 值換算成對應的 rem 值，方便快捷。

    此外，在 head 中咱們還設置了：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

 下面給出幾個方案：

1.

@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

 2.

var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = 
  ((window.innerWidth / designWidth) * rem2px) + 'px';

 3.

var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = 
  ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';

    爲了更避免理解上的混亂，我在上面js的代碼中加了 ( ) ，實際代碼中是不須要的。

詳細分析一下，rem 和 px 直接的轉換公式能夠寫爲：

1rem = 1 * htmlFontSize

    htmlFontSize 爲 html 元素的字體大小。

 4.最終方案（適配橫豎屏）

function adapt(designWidth, rem2px){
  var d = window.document.createElement('div');
  d.style.width = '1rem';
  d.style.display = "none";
  var head = window.document.getElementsByTagName('head')[0];
  head.appendChild(d);
  var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
  d.remove();
  document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
  var st = document.createElement('style');
  var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
  var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
  st.innerHTML = portrait + landscape;
  head.appendChild(st);
  return defaultFontSize
};
var defaultFontSize = adapt(640, 100);

 以上內容非原創是筆者看到有意思的進行整理做爲我的筆記用 原文地址：https://github.com/hbxeagle/rem/blob/master/README.md