淺析rem布局方案

一些像素概念

• 物理像素：即實際的每一個物理像素，也就是移動設備上每一個物理顯示單元（點）
• 設備邏輯像素（css中的px）：可以理解為一個虛擬的相對的顯示塊，與物理像素有著一定的比例關系，也就是下面的設備像素比
• 設備像素比（dpr）：= 物理像素 / 設備獨立像素(px)

如果dpr為1的話，那么1px = 1物理像素，x軸y軸加起來就是1

如果dpr為2的話，那么1px = 2物理像素，x軸y軸加起來就是4

以此類推

在js中可以通過window.devicePixelRatio獲取當前設備的dpr。

這里說明一下，無論dpr多大，1px的大小通常來說是一致的，這也就意味著，隨著dpr的增大，物理像素點會越來越小，這樣才能容納更多的物理像素，才能更高清，更retina

說完基本概念，來說一下幾個問題：

retina屏圖片模糊

首先普及一下位圖像素：一個位圖像素是圖片的最小數(shù)據(jù)單元，每一個單元都包含具體的顯示信息（色彩，透明度，位置等等）

那為什么在dpr高的retina屏上反而會模糊呢？看圖~

在1dpr的屏幕上，位圖像素和物理像素一一對應沒什么問題，但是在retina屏上，由于一個px由4個甚至更多的物理像素組成，并且單個位圖像素不能進一步分割，所以會出現(xiàn)就近取色的情況，如果取色不均，那么就會導致圖片模糊。

對于這種情況，只能采用@2x、@3x這樣的倍圖來適配高清展示，這樣側向說明了為什么照著iphone6做的ui稿不是375，而是750的問題。

雖然這樣在dpr為1的屏幕上會導致1個物理像素上有4個位圖像素，但是這種情況的取色算法更優(yōu)，影響不大，不做討論。

1px的粗細問題

由于1px的實際大小是一樣的，只是里面的物理像素數(shù)量不同，所以如果直接寫1px是沒問題的，不會出現(xiàn)粗細不同的情況，但是這樣一來retina的優(yōu)勢也rem的作用也就沒了，其實還是dpr的問題，dpr為1，那么1px就是一個物理像素，但是在retina中。1px實際可能有4、9個物理像素，ui想要的其實是1個物理像素，而不是1px，不過由于不是素所有的手機都能適配0.x，所以曲線救國，采用scale縮放或者設置meta都可以

viewport

三個概念

• layout viewport
• visual viewport
• ideal viewport

layout viewport

最開始，pc上的頁面是無法再移動端正常顯示的，因為屏幕太小，會擠作一團，所以就有了viewport的概念，又稱布局視口（虛擬視口），這個視口大小接近于pc，大部分都是980px

visual viewport

有了布局視口，還缺一個承載它的真是視口，也就是移動設備的可視區(qū)域-視覺視口（物理視口）,這個尺寸隨著設備的不同也有不同。這樣在視覺視口中創(chuàng)建了一個布局視口，類似overscroll:scroll;這樣，可以通過滾動拖拽、縮放擴大進行較好的訪問體驗

ideal viewport

像上面的體驗在早些年可能比較多，但是近幾年幾乎很少了，還是歸咎于用戶體驗，所以，我們還需要一個視口-理想視口（同樣是虛擬視口），不過這個理想視口的大小是等于布局視口的，這樣用戶就能得到更好的瀏覽體驗。

一個特性

viewport有六種可以設置的常用屬性：

• width：定義layout viewport的寬度，如果不設置，大部分情況下默認是980
• height：非常用
• initial-scale：可以以某個比例將頁面縮放\放大，你也可以用它來設置ideal viewport：

  <meta name='viewport' content='initial-scale=1' />

• maximum-scale：限制最大放大比例
• minimum-scale：限制最小縮小比例
• user-scalable：是否允許用戶放大\縮小頁面，默認為yes

rem適配方案

先說原理，通過meta修正1px對應的物理像素數(shù)量，在根據(jù)統(tǒng)一的設計稿來生成html上的動態(tài)font-size，根據(jù)dpr構造字體等誤差較大的樣式的mixin

// 第一版:
function initRem() {
  const meta = document.querySelector('meta[name="viewport"]');;
  const html = document.documentElement;
  const cliW = html.clientWidth;
  const dpr = window.devicePixelRatio || 1;
  meta.setAttribute('name', 'viewport');
  meta.setAttribute(
      'content',
      `width=${cliW * dpr}, initial-scale=${1 /
          dpr} ,maximum-scale=${1 / dpr}, minimum-scale=${1 /
          dpr},user-scalable=no`
  );
  html.setAttribute('data-dpr', dpr);
  // 這樣計算的好處是，你可以直接用ui的px/100得到的就是rem大小，方便快捷，無需mixin
  html.style.fontSize = 10 / 75 * cliW * dpr + 'px';
}
initRem();
window.onresize = window.onorientationchange = initRem();

對于引入的第三方ui組件，需要使用px2rem轉換工具去做整體轉換，比如postcss-pxtorem：https://github.com/cuth/postcss-pxtorem