rem在響應式佈局中的應用

rem/em/px/pt的基友關係

px
像素相對長度單位,相對於顯示器屏幕解析度而言

em
相對長度單位,根據其父元素來設置字體大小

pt
point，是印刷行業常用單位，等於1/72英寸

rem
CSS3新增的一個相對單位,是根據網頁的跟元素（html）來設置字體大小

rem應用於適配

rem的特性同樣適用於width和height，我們可以根據根元素的font-size值來改變元素的寬高值，由此我們應該可以聯想到我們可以根據屏幕大小動態地給html設定不同的值，從而達到我們css樣式中的適配效果。

rem的適配規則

1.選擇基準
雖然我們所寫出的頁面要在不同的屏幕大小設備上運行，但是我們寫頁面的時候，必須要選擇其中一種屏幕大小作為初始的基準，而這個基準的選擇應該根據我們所拿到的視覺稿來決定，

2.rem數值計算
正常情況下rem的值預設為16px，這樣在整個頁面的css計算過程中太過繁瑣。比如，現在有個30px寬度的元素，就得寫成30/16rem。對於整個頁面來說工作量還是挺大的。所以這裡提供了倆種方法

• 可以將html的font-size設置成100px
  這樣設置，在寫單位時直接將數值除以100在加上rem的單位就可以了。如果設計稿的字體是16px；我們就可以寫成1.6rem。
  • 這裡為什麼不用10？
    因為google等瀏覽器對最小字體有限制，即最小為12px，所以設置10px會有問題。

• 使用sass

  $rem : 16x;
  @function px_rem($px){
  @return ($px/$rem) + rem;
  }

3.動態設置html的font-size
隨著屏幕大小的改變，html的font-size的值應該是基準rem*改變後的屏幕寬度 / 基準屏幕寬度

• 利用css的media query來設置（這種是一個寬度區間內一個rem）

  @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    $rem : 16x;
  }

• 利用javascript來動態設置（這種方法每一個寬度點都會有一個新的rem）

  document.getElementsByTagName('html')[0].style.fontSize = 基準rem*window.innerWidth / 基準屏幕寬度 + 'px';

考慮dpr

一般我們獲取到的視覺稿大部分尺寸是雙倍大小的，我們一般會自覺的將標註/2，但是當我們配合rem使用時，完全可以按照視覺稿上的尺寸來設置。

• 設計給的稿子雙倍的原因是iphone等高清屏手機的存在，高清屏的像素比(device pixel ratio)dpr比較大，所以顯示的像素較為清晰。

• 一般手機的dpr是1，iphone4，iphone5這種高清屏是2，iphone6s plus這種高清屏是3，可以通過js的window.devicePixelRatio獲取到當前設備的dpr，所以iphone6給的視覺稿大小是（*2）750×1334了。

• 拿到了dpr之後，我們就可以在viewport meta頭裡，取消讓瀏覽器自動縮放頁面，而自己去設置viewport的content

  meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

  這樣我們就直接可以使用視覺稿上的尺寸了。

點擊查看示例>>

我的博客:http://bigdots.github.io、http://www.cnblogs.com/yzg1/

如果覺得本文不錯的話，幫忙點擊下麵的推薦哦,謝謝！