如何更愉快地使用rem
em和rem
對(duì)font-size使用rem
當(dāng)瀏覽器解析HTML文檔時(shí)尊浪，創(chuàng)建了一個(gè)用來(lái)代表頁(yè)面元素的集合，叫做DOM。樹(shù)狀結(jié)構(gòu)，每一個(gè)節(jié)點(diǎn)代表一個(gè)元素茅坛。<html>就是頂層節(jié)點(diǎn)（根節(jié)點(diǎn)），在下面的是它的子節(jié)點(diǎn)<head>和<body>盆色，再往下的就是它們的子節(jié)點(diǎn)灰蛙，還有其后代節(jié)點(diǎn)祟剔，如此類推隔躲。
根節(jié)點(diǎn)是文檔里所有其他元素的祖先。它有一個(gè)特別的偽類選擇器(:root)物延，在樣式表里可以用這個(gè)選擇器表示宣旱。使用帯類名的類型選擇器html，或者直接用標(biāo)簽選擇器叛薯，效果是一樣的浑吟。
rem是根em（root em）的縮寫(xiě)。rem是和根元素關(guān)聯(lián)的耗溜，不依賴當(dāng)前元素组力。不管你在文檔中的什么地方使用這個(gè)單位，1.2rem的計(jì)算值是相等的抖拴，等于1.2倍的根元素的字號(hào)大小燎字。下面的示例代碼中腥椒，聲明了根元素的字號(hào)大小，并在嵌套的無(wú)序列表中使用rem聲明字號(hào)大小候衍。
.1 偽類 :root 等價(jià)于 html 選擇器笼蛛；2 使用瀏覽器的默認(rèn)字號(hào)大小（16px）
在這個(gè)示例里蛉鹿，根字號(hào)大小是瀏覽器的默認(rèn)大小16px（根元素的1em等于瀏覽器的默認(rèn)字號(hào)大斜蹩场）。無(wú)序列表的字號(hào)大小為0.8rem妖异，計(jì)算結(jié)果是12.8px惋戏。因?yàn)檫@只跟根元素相關(guān)，盡管你在列表里嵌套了列表随闺，嵌套子列表的字號(hào)仍然保持不變日川。
可用性：對(duì)font-size使用相對(duì)長(zhǎng)度單位
一些瀏覽器會(huì)提供給用戶2種方式定制文字的大小：縮放和設(shè)置一個(gè)默認(rèn)的字號(hào)大小矩乐。通過(guò)按Ctrl+或者Ctrl-龄句，用戶可以對(duì)頁(yè)面進(jìn)行縮放。這在視覺(jué)上會(huì)把整個(gè)頁(yè)面的文字或圖片（其實(shí)是所有元素）都放大或縮小了散罕。在一些瀏覽器分歇，這個(gè)改變只針對(duì)當(dāng)前的標(biāo)簽頁(yè)且是臨時(shí)的，不會(huì)影響到新開(kāi)的標(biāo)簽頁(yè)欧漱。
設(shè)置默認(rèn)字號(hào)大小职抡，會(huì)有點(diǎn)不一樣。不僅僅是設(shè)置的入口比較難找（一般在瀏覽器的設(shè)置頁(yè)）误甚，而且這個(gè)設(shè)置是永久的缚甩，直到用戶把默認(rèn)值還原。值得注意的是窑邦，這個(gè)設(shè)置對(duì)使用px或其他絕對(duì)單位定義的字號(hào)大小無(wú)效擅威。因?yàn)槟J(rèn)字號(hào)大小對(duì)一些用戶是必要的，尤其是弱視的群體冈钦，你應(yīng)該用相對(duì)單位或百分比來(lái)定義字號(hào)的大小郊丛。
rem簡(jiǎn)化了很多em帶來(lái)的復(fù)雜度。事實(shí)上瞧筛，rem提供了一個(gè)在px和em間的相對(duì)單位折中解決方案厉熟，而且更易于使用。那么较幌，是不是意味著你應(yīng)該在對(duì)所有元素都使用rem揍瑟，去掉其他長(zhǎng)度單位呢？當(dāng)然不是乍炉。
在CSS的世界里绢片，這個(gè)答案通常是嘁字，看情況。rem只是你的工具箱中的其中一個(gè)杉畜。掌握CSS很重要的一點(diǎn)纪蜒，就是學(xué)會(huì)分辨在什么場(chǎng)景下該使用什么工具。我的選擇是此叠，對(duì)font-size使用rem纯续，對(duì)border使用px，對(duì)其他的度量方式如padding灭袁、margin猬错、border-radius等使用em。然而在必要時(shí)茸歧，需要聲明容器的寬度的話倦炒，我更喜歡使用百分比。
這樣软瞎，字號(hào)大小就變得可預(yù)測(cè)逢唤，而當(dāng)其他因素影響到元素的字號(hào)大小時(shí)，你也可以借助em去縮放元素的padding和margin涤浇。在border上使用像素是很合適的鳖藕，尤其當(dāng)你想要一根漂亮的線的時(shí)候。以上就是我對(duì)不同屬性使用不同單位的理想方案只锭，不過(guò)我要再次聲明著恩，這些都是工具，在某些特定場(chǎng)景下蜻展，利用不同的工具可能取到更好的效果喉誊。
提示：當(dāng)你不確定的時(shí)候，對(duì)font-size使用rem纵顾，對(duì)border使用px伍茄，以及對(duì)其他大多數(shù)屬性使用em。
停止使用像素思維去思考
把頁(yè)面的根元素字號(hào)大小定義為0.625em或者62.5%片挂，在最近幾年來(lái)幻林，這樣的用法很常見(jiàn)贞盯，這是一種模式音念，或者更貼切地說(shuō)，這是一種反模式躏敢。
[ 代碼片段 2.11 反模式：全局地把font-size定義為10px ]
.我并不推薦這種用法闷愤。這個(gè)用法把瀏覽器默認(rèn)的字號(hào)大小16px縮小到10px。這樣做的好處是簡(jiǎn)化了計(jì)算件余，如果設(shè)計(jì)師告訴你字號(hào)大小應(yīng)該是14px讥脐，那你可以很輕易地計(jì)算出1.4rem遭居，畢竟我們還是在使用相對(duì)單位。
一開(kāi)始旬渠，這看起來(lái)很方便俱萍，但事實(shí)上這樣的實(shí)現(xiàn)方式有兩個(gè)問(wèn)題。第一告丢，強(qiáng)制你寫(xiě)了很多重復(fù)的樣式代碼枪蘑。10px對(duì)于大多數(shù)文本來(lái)說(shuō)太小了，你需要在整個(gè)頁(yè)面中岖免，來(lái)來(lái)回回地覆蓋它岳颇。你會(huì)發(fā)現(xiàn)，自己把一段段落（<p>）的字號(hào)大小聲明為1.4rem颅湘，然后又把導(dǎo)航（<nav>）的鏈接字號(hào)大小聲明為1.4rem话侧，樣式代碼中還有很多這樣的用法。這樣引入了更高的錯(cuò)誤風(fēng)險(xiǎn)闯参，當(dāng)你需要修改時(shí)發(fā)現(xiàn)代碼耦合程度比較高瞻鹏，同時(shí)也會(huì)讓樣式文件變大。
第二個(gè)問(wèn)題是鹿寨，你這么做的時(shí)候乙漓，其實(shí)你還是在用像素的思維在思考。雖然在代碼里寫(xiě)的是1.4rem释移，但是在你的腦子里叭披，其實(shí)還是想的是14px。在響應(yīng)式網(wǎng)頁(yè)開(kāi)發(fā)中玩讳，你應(yīng)該學(xué)會(huì)適應(yīng)那些“模糊”的值涩蜘。1.2em實(shí)際等于多少像素，并不重要熏纯，你只需要知道這是比繼承的字號(hào)大一點(diǎn)點(diǎn)同诫，那就足夠了。而且樟澜，如果在屏幕上這不是你想要的效果误窖，那就改吧。這是需要時(shí)間實(shí)驗(yàn)和試錯(cuò)的秩贰，但事實(shí)上霹俺，使用px的時(shí)候我們也需要這樣做。（在第13章毒费，我們會(huì)有更具體的方式來(lái)優(yōu)化這個(gè)實(shí)現(xiàn)方式丙唧。）
當(dāng)使用em時(shí)，我們很容易陷入糾結(jié)觅玻，這個(gè)值轉(zhuǎn)化成像素值會(huì)是多少呢想际？尤其對(duì)于字號(hào)大小培漏。你一直在乘和除以em值，這樣你很快就會(huì)瘋掉了胡本。相反牌柄，我希望你可以接受一項(xiàng)挑戰(zhàn)，嘗試培養(yǎng)先開(kāi)始使用em的習(xí)慣侧甫。如果你習(xí)慣使用像素友鼻，那轉(zhuǎn)成em是需要一定時(shí)間和練習(xí)的，但相信我闺骚，這很值得彩扔。
這不是在說(shuō)你再也不使用像素了。如果你跟一個(gè)設(shè)計(jì)師合作僻爽，你可能需要用更精確的像素值去溝通虫碉，這沒(méi)問(wèn)題的。在項(xiàng)目的開(kāi)始胸梆，你需要聲明一個(gè)基礎(chǔ)的字號(hào)大卸嘏酢（通常是對(duì)標(biāo)題或者標(biāo)注的常用字號(hào)）。使用絕對(duì)值去描述大小碰镜，往往會(huì)更加容易兢卵。
設(shè)置一個(gè)合理的字號(hào)默認(rèn)值
先假設(shè)你想把默認(rèn)字號(hào)設(shè)定為14px。把10px設(shè)定為基準(zhǔn)值绪颖，再在頁(yè)面中去覆蓋它的寫(xiě)法秽荤，我們不推薦這種寫(xiě)法，相反柠横，你應(yīng)該在根元素上直接聲明一個(gè)值窃款。
在這個(gè)代碼片段里，目標(biāo)字號(hào)值是繼承的牍氛，瀏覽器的默認(rèn)值16px晨继，那么14/16 = 0.875。
把下面的代碼添加到一個(gè)新的樣式表的最上面搬俊，我們會(huì)在這上面添加其他代碼紊扬。這里設(shè)定根元素（）的默認(rèn)字號(hào)大小。
現(xiàn)在唉擂，你的期望基準(zhǔn)字號(hào)14px對(duì)整個(gè)頁(yè)面的元素有效餐屎，你不需要在其他地方重新聲明了。你只需要在設(shè)計(jì)不一樣的地方修改成新的字號(hào)楔敌，譬如標(biāo)題啤挎。
關(guān)于本文
譯者：@Yuying?Wu
譯文：
http://wuyuying.com/blog/archives/css-in-depth-stop-thinking-in-px/
作者：@Keith?J.Grant
原文：
https://livebook.manning.com/#!/book/css-in-depth/chapter-2
