rem在響應式佈局中的應用

品讀夜的黑發表於2016-04-05
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');

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

相關文章