2016-10-31 藍(lán)藍(lán)設(shè)計(jì)的小編
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
今天我們深度了解一下 rem 單位,這個(gè)單位目前已經(jīng)得到了優(yōu)秀瀏覽器的支持,并且有一些兼容方案來(lái)幫助你在低版本的 IE 瀏覽器中的使用它。
可能在你使用收音機(jī)或者用其他音樂(lè)播放器之前,就已經(jīng)聽(tīng)過(guò)“R.E.M.”這個(gè)詞了。在這個(gè)樂(lè)隊(duì)眼中,這個(gè)詞是“淺睡眠時(shí)眼球的快速轉(zhuǎn)動(dòng)”的縮寫(xiě),而在 css 中,rem 代表著“以根元素為參照物的 em 單位“。他不會(huì)讓你拋棄你的宗教信仰也不會(huì)讓你相信那個(gè)遠(yuǎn)在月球的人,但是它可以幫助你實(shí)現(xiàn)一個(gè)和諧、平穩(wěn)的設(shè)計(jì)。
根據(jù) W3C 規(guī)范中對(duì) 1rem 的定義:
1rem 與等于根元素
font-size
的計(jì)算值。當(dāng)明確規(guī)定根元素的font-size
時(shí),rem 單位以該屬性的初始值作參照。
這就意味著 1rem
等于 html
元素的字體大?。ù蟛糠譃g覽器根元素的字體大小為16px)
使用 em 單位最主要的問(wèn)題是他們與用戶元素相關(guān)聯(lián)。在這種情況下,這些元素可以相互嵌套并且造成意想不到的結(jié)果。我們來(lái)思考下面一個(gè)例子,在根元素的文字大小為默認(rèn)值16px
的情況下,我們想要所有列表的字體大小均為 12px
:
html { font-size: 100%;
} ul { font-size: 0.75em;
}
假如有一個(gè)列表是嵌套在另一個(gè)列表下,那么內(nèi)列表的字體大小將會(huì)是外列表字體大小的 75%(也就是 9px
),我們?nèi)匀豢梢酝ㄟ^(guò)幾行代碼來(lái)解決這個(gè)問(wèn)題:
ul ul { font-size: 1em;
}
這樣就可以解決這個(gè)問(wèn)題,然而我么仍需要特別關(guān)注那些嵌套特別深的元素。
當(dāng)使用 rem 單位后,事情就變得簡(jiǎn)單了:
html { font-size: 100%;
} ul { font-size: 0.75rem;
}
當(dāng)所有尺寸都以根元素的文字大小作為參照后,就不再需要為嵌套的元素單獨(dú)定義樣式了。
Jonathan Snook 是第一批使用 rem 單位來(lái)定義文字大小的開(kāi)發(fā)者,早在 2011 年 5 月,他就發(fā)表了題為《使用 rem 來(lái)定義文字大小》 的文章。和大多數(shù) CSS 開(kāi)發(fā)者一樣,他必須去解決在 em 單位在復(fù)雜的布局上的一系列問(wèn)題。
在那時(shí)候,老版本的 IE 依然有很大的市場(chǎng)份額,并且他們不可以縮放由 px 來(lái)定義的文本。然而,就像我們之前看到的那樣,在使用 em 單位的情況下,很容易忘記元素之前的嵌套關(guān)系,并且得到一個(gè)意想不到的結(jié)果。
使用 rem 單位來(lái)定義文字的大小最大的問(wèn)題在于這些值有點(diǎn)難以使用。讓我們來(lái)看一個(gè)例子,假設(shè)根元素的文字大小是 16px,我們常用的文字大小轉(zhuǎn)換為 rem 值如下:
正如我們看到的那樣,這些值在計(jì)算起來(lái)非常不方便。因此,Snook 使用一個(gè)叫 62.5 的方式來(lái)解決這個(gè)問(wèn)題。然而這并不是一個(gè)創(chuàng)新,因?yàn)樗缫言?em 單位中運(yùn)用了:
body { font-size:62.5%; } /* =10px */ h1 { font-size: 2.4em; } /* =24px */ p { font-size: 1.4em; } /* =14px */ li { font-size: 1.4em; } /* =14px? */
因?yàn)?rem 單位與根元素相關(guān)聯(lián),Snook 改進(jìn)后的方案變?yōu)榱耍?
html { font-size: 62.5%; } /* =10px */ body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */
有一點(diǎn)值得考慮的是有一些瀏覽器不支持 rem 單位。因此上面的代碼可以按照以下方式來(lái)改寫(xiě):
html { font-size: 62.5%;
} body { font-size: 14px; font-size: 1.4rem;
} h1 { font-size: 24px; font-size: 2.4rem;
}
盡管這個(gè)解決方案看起來(lái)是最好的解決方案,但還是有人不建議使用這種方式。Harry Roberts 寫(xiě)了一篇文章,里面記錄了他在實(shí)際使用 rem 單位過(guò)程中的一些感受。從他的觀點(diǎn)來(lái)看,雖然 62.5% 這種解決方案使得計(jì)算變得簡(jiǎn)單(因?yàn)樽煮w大小以 px 為單位時(shí)的值正好是以 rem 為單位的 10 倍),但是他迫使開(kāi)發(fā)者重寫(xiě)他們網(wǎng)站中的所有文字大小。
Chris Coyier 在 CSS-Tricks 提出了第三種解決方案。他的解決方式充分利用了到目前為止我們遇到的三種單位。根元素的長(zhǎng)度單位依舊采用 px
,模塊用 rem 單位,模塊內(nèi)的元素使用 em 單位。這種方式可以很容易的操作根元素的大小、縮放模塊,模塊內(nèi)內(nèi)容的大小以模塊自身文字大小來(lái)進(jìn)行縮放。Louis Lazaris 隨后在 CSS 中 em 單位的強(qiáng)大之處 提出了他的觀點(diǎn)。
在下面的例子中你可以看出 Chris 的解決方案是怎么工作的:
代碼可以看 SitePoint(@SitePoint) 在 CodePen 寫(xiě)的 《在 CSS 中使用 em 和 rem 單位的方式》。
正如你看到的那樣,沒(méi)有利用新技術(shù)來(lái)解決這個(gè)問(wèn)題??赡芤恍┙M合方式僅僅被開(kāi)發(fā)者的想象力所限制。
在媒體查詢中利用 em 和 rem 單位,與“行的最佳長(zhǎng)度”的概念密切向關(guān),并能給用戶帶來(lái)流暢的閱讀體驗(yàn)。在 2014 年 9 月,Smashing Magazine 在 web typography 發(fā)表了一篇名叫 尺寸那些事: 在 web 響應(yīng)式設(shè)計(jì)中掌握文字大小與行寬度的平衡的文章。最有意思的是,文章給出了行的最佳寬度度,45 到 85 個(gè)字符(包括空格和標(biāo)點(diǎn)符號(hào)),65 是最理想的行寬值。
粗略的估計(jì)一個(gè)字節(jié)大小就是 1rem,利用這個(gè)方法我們就可以用一種移動(dòng)優(yōu)先的方式控制內(nèi)容的單行文本流:
.container { width: 100%;
}
@media (min-width: 85rem) { .container { width: 65rem;
}
}
然而在媒體查詢中使用 em 和 rem 單位作為媒體查詢的條件時(shí)有一個(gè)有意思的細(xì)節(jié):1 rem,1em 還有瀏覽器默認(rèn)文字大小這三值表示這同一個(gè)值。這樣做的原因可以在媒體查詢規(guī)范得到解釋(特別強(qiáng)調(diào)):
詢中相對(duì)單位都是以一個(gè)初始值作為基準(zhǔn),這就意味著這些單位永遠(yuǎn)不會(huì)基于聲明的結(jié)果。例如:在 HTML 中,em 單位與用戶瀏覽器或者用戶偏好設(shè)置中設(shè)置的初始文字大小有關(guān),而不是頁(yè)面上的樣式中定義的文字大小。
讓我們看一個(gè)關(guān)于這個(gè)特性的一個(gè)小例子:
在 CodePen 上看一個(gè)關(guān)于媒體查詢的 demo
首先,在我們的 HTML 文檔中,有一個(gè)元素將會(huì)展現(xiàn)視口的寬度:
`Document width: <span></span>px`
接下來(lái)是兩條媒體查詢語(yǔ)句,一條是使用 rem 單位,另一條使用 em 單位(這里為了簡(jiǎn)便,使用了 Sass)
html {
font-size: 62.5%; /* 62.5% of 16px = 10px */ @media (min-width: 20rem) { /* 20*16px = 320px */ background-color: lemonchiffon;
font-size: 200%; /* 200% of 16px = 32px */ }
@media (min-width: 30em) { /* 30*16px = 480px */ background-color: lightblue;
font-size: 300%; /* 300% of 16px = 48px */(譯:原文是48px)
}
}
最后,我們使用一點(diǎn) jQuery 在頁(yè)面上顯示視口的寬度,并且在窗口縮放的時(shí)候更新這個(gè)值:
$('span').text($(window).width());
$(window).on('resize', function(e) {
$('span').text($(window).width());
});
在開(kāi)頭,我們使用了 62.5% 這個(gè)方法來(lái)說(shuō)明,修改根元素字體大小不會(huì)對(duì)媒體查詢產(chǎn)生任何影響。當(dāng)我們更改窗口的寬度時(shí),我們可以看到在 320 px 時(shí),第一條媒體查詢開(kāi)始起作用,到480px第二條媒體查詢開(kāi)始起作用。任何一條在媒體查詢中對(duì)文字大小聲明的改變都沒(méi)有起作用。唯一一個(gè)可以改變媒體查詢中寬度的是在瀏覽器里更改默認(rèn)文字大小。
因?yàn)檫@個(gè)原因,在媒體查詢語(yǔ)句中使用 em 單位還是 rem 單位已經(jīng)不那么重要了。事實(shí)上,無(wú)論是Foundation v5還是最近剛發(fā)布的Bootstrap v4 alpha都在他們的媒體查詢中使用了 em 單位。
我們能發(fā)現(xiàn)的第三種使用 rem 單位的方式是去構(gòu)建可縮放組件。使用 rem 來(lái)定義元素的寬度,外邊距和內(nèi)邊距 通過(guò)使用根元素的字體大小作為一個(gè)接口使元素縮放一致變?yōu)榱丝赡堋?我們可以通過(guò)下面兩個(gè)例子來(lái)看這是怎么起作用的。
使用 rem 來(lái)縮放文檔實(shí)例一
在這個(gè)例子里,我們通過(guò)媒體查詢中更改根元素的文字大小。就像上一個(gè)章節(jié)所講,這樣做的目的是為用戶定制不同設(shè)備下的不同閱讀體驗(yàn)。通過(guò) rem 單位來(lái)表示寬度,外邊距,內(nèi)邊距,這樣所有元素就會(huì)基于用戶的設(shè)備大小縮放。
讓我們看另一個(gè)例子:
代碼可以看 SitePoint(@SitePoint) 在 CodePen 寫(xiě)的 《使用 rem 動(dòng)態(tài)縮放模塊》
在第二個(gè)例子中,我們使用 JavaScript 來(lái)做同樣的操作。這次用戶根據(jù)自己的需要手動(dòng)控制界面的大小。我們可以使用多種方式(可以使用數(shù)據(jù)庫(kù),cookie 還有本地存儲(chǔ))來(lái)存儲(chǔ)用戶數(shù)據(jù),這樣就可以給用戶搭建一個(gè)基于用戶偏好的個(gè)性化系統(tǒng)。
在這里總結(jié)一下到目前為止我們對(duì) CSS 中 rem 單位的認(rèn)識(shí)。很顯然,在項(xiàng)目中使用 rem 有許多優(yōu)點(diǎn),比如:響應(yīng)式,可縮放,增加閱讀體驗(yàn),增加自定義元素的靈活性。rem 雖然不是一個(gè)通用的解決方案,但是通過(guò)謹(jǐn)慎的使用,它還是可以解決困擾開(kāi)發(fā)者多年的問(wèn)題。 我們每個(gè)人都可以去挖掘 rem 的所有潛能。從你的編輯器開(kāi)始吧,實(shí)驗(yàn)并向我們分享您的成果。
藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.820esy.cn