rem是CSS3中新增加的一個(gè)單位值，他和em單位一樣，都是一個(gè)相對(duì)單位。不同的是em是相對(duì)于元素的父元素的font-size進(jìn)行計(jì)算；rem是相對(duì)于根元素html的font-size進(jìn)行計(jì)算。這樣一來rem就繞開了復(fù)雜的層級(jí)關(guān)系，實(shí)現(xiàn)了類似于em單位的功能。
前面說了em是相對(duì)于其父元素來設(shè)置字體大小的，這樣就會(huì)存在一個(gè)問題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小，在我們多次使用時(shí)，就會(huì)帶來無法預(yù)知的錯(cuò)誤風(fēng)險(xiǎn)。而rem是相對(duì)于根元素<html>，這樣就意味著，我們只需要在根元素確定一個(gè)參考值，這個(gè)參考值設(shè)置為多少，完全可以根據(jù)您自己的需求來定。
假設(shè)就使用瀏覽器默認(rèn)的字號(hào)16px，來看一些px單位與rem之間的轉(zhuǎn)換關(guān)系：
| px | rem |------------------------| 12 | 12/16 = .75 || 14 | 14/16 = .875 || 16 | 16/16 = 1 || 18 | 18/16 = 1.125 || 20 | 20/16 = 1.25 || 24 | 24/16 = 1.5 || 30 | 30/16 = 1.875 || 36 | 36/16 = 2.25 || 42 | 42/16 = 2.625 || 48 | 48/16 = 3 |------------------------- 如果你要設(shè)置一個(gè)不同的值，那么需要在根元素<html>中定義，為了方便計(jì)算，時(shí)常將在<html>元素中設(shè)置font-size值為62.5%:
html {font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */}相當(dāng)于在<html>中設(shè)置font-size為10px，此時(shí)，上面示例中所示的值將會(huì)改變：
| px | rem |-------------------------| 12 | 12/10 = 1.2 || 14 | 14/10 = 1.4 || 16 | 16/10 = 1.6 || 18 | 18/10 = 1.8 || 20 | 20/10 = 2.0 || 24 | 24/10 = 2.4 || 30 | 30/10 = 3.0 || 36 | 36/10 = 3.6 || 42 | 42/10 = 4.2 || 48 | 48/10 = 4.8 |------------------------- 由于rem
聯(lián)系客服
