站長資訊網
rem是一個相對大小的值，相對于html元素字體大小的單位，語法格式為“元素:數字+rem”。rem改變了瀏覽器的字體大小，這時會使用我們的Web頁面布局被打破。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css3新增了相對單位 rem ,使用rem同em一樣皆為相對字體大小單位，是一個相對單位，相對根元素字體大小的單位，再直白點就是相對于html元素字體大小的單位。
優點：這樣在計算子元素有關的尺寸時，只要根據html元素字體大小計算就好。不再像使用em時，得來回的找父元素字體大小頻繁的計算，根本就離不開計算器。
rem為單位
CSS3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。在W3C官網上是這樣描述rem的——“font size of the root element” 。下面我們就一起來詳細的了解rem。
rem是相對于根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值，在根元素中設置多大的字體，這完全可以根據您自己的需，大家也可以參考下圖：
下面再來看一個簡單的實例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
我在根元素<html>中定義了一個基本字體大小為62.5%（也就是10px。設置這個值主要方便計算，如果沒有設置，將是以“16px”為基準 ）。從上面的計算結果，我們使用“rem”就像使用“px”一樣的方便，而且同時解決了“px”和“em”兩者不同之處。
rem的使用
首先我們要加入這個標簽：
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
具體意思如下：
initial-scale – 初始的縮放比例 minimum-scale – 允許用戶縮放到的最小比例 maximum-scale – 允許用戶縮放到的最大比例
然后再設置html的font-size：
// resize 窗口大小發生改變的時候才會觸發的，第一次加載時不會觸發 var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', // 手機屏幕是否反轉orientationchange window.addEventListener(resizeEvt, setFontSize, false); // IE 谷歌 document.addEventListener('DOMContentLoaded', setFontSize, false); //火狐 function setFontSize() { var cWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var basicNum = 200; var htmlFontSize = basicNum * (cWidth / 設計稿寬度); document.documentElement.style.fontSize = htmlFontSize + 'px'; }
一般設計稿的寬度是750，在開發過程中我們以iphone6/7/8為基準，那么html的font-size算出來應該是200*(375/750)=100px；所以若在設計稿中有一個width為200px的box。我們需要設置為他的寬為(200/100)rem；所以這就是我建議basicNum設置為200的原因，因為這樣算的話簡單。
var htmlFontSize=basicNum*(cWidth/設計稿寬度);
可以看出，屏幕尺寸越寬，根html的font-size越大。由于其他元素都是
以它為依據的所以能夠達到自適應。
瀏覽器的兼容性
rem是CSS3新引進來的一個度量單位，大家心里肯定會覺得心灰意冷呀，擔心瀏覽器的支持情況。其實大家不用害怕，你可能會驚訝，支持的瀏覽器還是蠻多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。
不過使用單位設置字體，可不能完全不考慮IE了，如果你想使用這個REM，但也想兼容IE下的效果，可你可考慮“px”和“rem”一起使用，用"px"來實現IE6-8下的效果，然后使用“Rem”來實現代瀏覽器的效果。
推薦學習：css視頻教程
