溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹css3中rem的作用是什么，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
rem是一個相對大小的值，相對于html元素字體大小的單位，語法格式為“元素:數字+rem”。rem改變了瀏覽器的字體大小，這時會使用我們的Web頁面布局被打破。
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 */}
h2 { 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”來實現代瀏覽器的效果。
關于css3中rem的作用是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
