css3中的rem怎麼用

rem是一個相對大小的值，相對於html元素字體大小的單位，語法格式為「元素:數字 rem」。 rem改變了瀏覽器的字體大小，這時會使用我們的網頁版面配置被打破。

本教學操作環境：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 {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*/}

我在根元素中定義了一個基本字體大小為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影片教學

#

以上是css3中的rem怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！