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