CSS - 瞭解一下 REM

前言

爲了瞭解移動端的佈局兼容，特意來看看 REM.

這篇文章主要介紹了：

- rem 的基礎，
- 和 em 的對比
- js的解決方案 - flexable.js 
- scss 和 less 的兼容辦法
複製代碼

Rem-Based Layout

先看看 rem 兼容性（基本上全部主流的瀏覽器都支持）-caniuse.com/#feat=rem

font size of the root element

• 上面的這句話意思就是咱們在指定一個 html 根元素的 font-size 的時候，咱們指定一個其餘的頁面元素爲 2rem 的時候就是字體元素的 2 倍大小
• 看下面的例子

/* * 基本元素： 12px */
html {font-size: 12px;}
h1 { font-size: 2rem; } /* 2 × 12px = 24px */
p { font-size: 1.5rem;} /* 1.5 × 12px = 18px */
div {width: 20rem;} /* 20 * 12px = 240px*/


/* * 基本元素： 16px */
html {font-size: 16px;}
h1 { font-size: 2rem; } /* 2 × 16px = 32px */
p { font-size: 1.5rem;} /* 1.5 × 16px = 24px */
div {width: 20rem;} /* 20 * 16px = 320px*/
複製代碼

來看看 rem 和 em 的區別

單位	定義	特色
rem	font size of the root element	以根元素字體大小爲基準
em	font size of the element	以自身元素字體大小爲基準

rem 就是能夠隨時拿來用的一個固定參考值

怎麼去計算 rem

經過 JavaScript 讀取屏幕寬度，而後根據寬度計算出對應的尺寸並設置根元素的 font-size

const oHtml = document.getElementByTagName('html')[0];

const width = oHtml.clientWidth;

// 320px 的屏幕基準像素爲 12px
oHtml.style.fontSize = 12 * (width / 320) + "px";
複製代碼

• 這樣iphone8（375px）下html的font-size 就是14.0625px，iphone8p下font-size就是15.525px。

• 若是在iphone8（375px）下設置元素font-size爲 1.7066rem， 效果跟設置其font-size爲 24px 是同樣的(24 / 14.0625 = 1.7066)。

• 使用JS來獲取屏幕寬度的好處在於能夠100%適配全部的機型寬度，由於其元素的基準尺寸是直接算出來的。

媒體查詢

既然是根據屏幕的寬度來設置元素的大小，大部分同窗應該想到的是 css3 的媒體查詢來解決這個問題，其實這種方法也是咱們最經常使用的解決方案之一。

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}
複製代碼

用 SASS 和 LESS 方法去更好的時候用 REM

• 咱們先設置一個 font-size 的方法

// css 
html {
  font-size: 62.5%; /* 基礎的 font-size: 10px */
}

// less
.font-size(@sizeValue) {
  @remValue: @sizeValue;
  @pxValue: (@sizeValue * 10);
  font-size: ~"@{pxValue}px"; 
  font-size: ~"@{remValue}rem";
}

// sass
@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}
複製代碼

• 具體的用法

// less
p {
  .font-size(13);
}

// sass
p {
  @include font-size(13);
}
複製代碼

rem 自適應 js

• .......caibaojian.com/simple-flex…
• 上面這篇文章很好的用 js 解決的 px-->rem

應用

• 須要兼容大部分移動端，文字和圖片較多的應用，好比淘寶，小說網之類的應用能夠使用這種方法

咱們平時使用rem還有遇到的一大問題就是咱們習慣使用px來定義樣式，而px到rem是須要計算轉化過程的，剛接觸rem的時候你可能須要px先定義好頁面佈局，而後一個一個計算並替換rem單位。

參考

• every-layout.dev/layouts/sta…
• snook.ca/archives/ht…