資訊專欄INFORMATION COLUMN
摘要：在平時的工作當(dāng)中，我發(fā)現(xiàn)自己大多數(shù)時候是用來作為字體單位的，不僅如此，其實公司的所有前端項目都是以作為字體單位的。我們知道像素作為相對長度單位是相對于顯示器的分辨率而言的。很好地解決了的字體大小從父元素繼承所帶來的不便。
px
在平時的工作當(dāng)中，我發(fā)現(xiàn)自己大多數(shù)時候是用px來作為CSS字體單位的，不僅如此，其實公司的所有前端項目都是以px作為CSS字體單位的。我們知道px（像素）作為CSS相對長度單位是相對于顯示器的分辨率而言的。它的特點是穩(wěn)定、精確、瀏覽器兼容性好，但是對應(yīng)的，在Web頁面中使用px作為字體的單位時也有它的問題，比如當(dāng)用戶試圖調(diào)整瀏覽器的默認(rèn)字體大小時，由于px是固定大小的，所以再怎么調(diào)整對應(yīng)頁面上字體的大小都是不會變的。
em于是為了解決上面提到的px作為字體單位的類似問題，又引入了一個新的CSS字體單位em，em作為字體單位也是一個相對長度單位，它相對于當(dāng)前對象內(nèi)文本的字體大小，若當(dāng)前對象內(nèi)文本的字體大小未被設(shè)置，則采用瀏覽器默認(rèn)的字體大小。
任意瀏覽器的默認(rèn)字體大小都是16px，所以在瀏覽器字體大小保持默認(rèn)的狀態(tài)下：1em = 16px，那么1px = 1 / 16 = 0.0625em，10px = 0.625em，同理12px = 0.0625 x 12 = 0.75em，14px = 0.0625 x 14 = 0.875em。
但是如果每次都要去進(jìn)行對應(yīng)的px值到em值得計算的話，想必會大大降低開發(fā)效率，為了簡化px到em的值轉(zhuǎn)換，可以在CSS中聲明body的字體大小為62.5%，即body {font-size: 62.5%}，這樣一來，1em = 16px * 62.5% = 10px，那么對應(yīng)的12px = 1.2em，14px = 1.4em，這樣換算起來就簡單的多了。
但是像上面這樣還是有一個問題，就是em作為字體單位是會繼承父元素字體大小的，上面的計算是假設(shè)所有元素的字體大小都以body的字體大小作為繼承基準(zhǔn)，然而實際的情況往往都不是這樣的。舉一個例子，如下DOM結(jié)構(gòu)：
在默認(rèn)情況下，我們期望標(biāo)簽下面的字體大小應(yīng)該為1.2em也就是12px，標(biāo)簽下面的字體大小為1em也就是10px，但實際像上面這樣我們得到的最終結(jié)果是標(biāo)簽下面的字體大小為1.2 x 1.2 = 1.44em = 14.4px，標(biāo)簽下面的字體大小為1.2 x 1 = 1.2em = 12px，這個就是因為em作為字體單位會繼承父元素的字體大小，在本例中，由于給父元素設(shè)置了字體大小為1.2em，所以瀏覽器在計算標(biāo)簽和標(biāo)簽的字體大小時就是上面實際所得到的結(jié)果。
這樣一來其實em真正的計算公式就是：1 ? 當(dāng)前父元素的font-size x 需要轉(zhuǎn)換的像素值 = em值，就不是單純地每次都去除以16px了，顯然這種繼承的方式在開發(fā)時會帶來極大的不便。
rem為了解決上面提到的em字體大小繼承問題，又誕生出了一個新的CSS字體大小單位：rem，即 “root em”，它在字體大小與px進(jìn)行換算時與em有著同樣的換算規(guī)則，但唯一不同的是，rem只會以根元素的字體大小作為換算基準(zhǔn)，而不會每次都從自己當(dāng)前的父元素那里繼承，在Web頁面中根元素就是，它的字體大小就是瀏覽器當(dāng)前所設(shè)置的字體大小，默認(rèn)情況下就是16px。
這樣一來，按照上面提到的轉(zhuǎn)換規(guī)則，還是上面的例子，把賦值給，即，所有的單位改成rem，就可以得到我們的期望結(jié)果：標(biāo)簽下面的字體大小應(yīng)該為1.2rem也就是12px，標(biāo)簽下面的字體大小為1rem也就是10px（此處只講述原理，假設(shè)忽略瀏覽器的最小字體大小限制）。
rem很好地解決了em的字體大小從父元素繼承所帶來的不便。
瀏覽器兼容性rem是CSS 3當(dāng)中引入的單位，支持的瀏覽器有：Mozilla Firefox 3.6+、Apple Safari 5.0+、Google Chrome、IE9+和Opera11+，在現(xiàn)代瀏覽器或移動端，我們可以放心地使用rem來作為字體大小單位，但是如果你想使用rem這個單位，又想兼容低版本的IE瀏覽器，可以考慮px和rem同時使用，用px兼容低版本IE的效果，用rem實現(xiàn)現(xiàn)代瀏覽器的效果。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111846.html
摘要：所以未經(jīng)調(diào)整的瀏覽器都符合。原因可能是處理漢字時，對于浮點的取值精確度有限。是新增的一個相對單位，根。目前，除了及更早版本外，所有瀏覽器均已支持。對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個絕對單位的聲明。 單位轉(zhuǎn)換工具 點我 px px是一個虛擬長度單位，是計算機系統(tǒng)的數(shù)字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI(Dots Per Inch，每英寸像素數(shù))...
摘要：寫了一篇文章，里面記錄了他在實際使用單位過程中的一些感受。他的解決方式充分利用了到目前為止我們遇到的三種單位。根元素的長度單位依舊采用，模塊用單位，模塊內(nèi)的元素使用單位。隨后在中單位的強大之處提出了他的觀點。 什么是 rem 可能在你使用收音機或者用其他音樂播放器之前，就已經(jīng)聽過R.E.M.這個詞了。在這個樂隊眼中，這個詞是淺睡眠時眼球的快速轉(zhuǎn)動的縮寫，而在 css 中，rem 代表著...
摘要：是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。引自手冊特點是新增的一個相對單位，根，這個單位引起了廣泛關(guān)注。目前，除了及更早版本外，所有瀏覽器均已支持。對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個絕對單位的聲明。 國內(nèi)的設(shè)計師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別，又各自有什么優(yōu)劣呢？ PX特點 IE無法調(diào)整那些使用px作為單位的字體大??； ...
摘要：引自手冊是相對長度單位。所有未經(jīng)調(diào)整的瀏覽器都符合。特點是新增的一個相對單位，根，這個單位引起了廣泛關(guān)注。目前，除了及更早版本外，所有瀏覽器均已支持。對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個絕對單位的聲明。 在他處看到一篇好文章，想記錄在自己的學(xué)習(xí)筆記中，原文作者看到我轉(zhuǎn)載若是介意，聯(lián)系我立馬就刪除，附上原文鏈接：http://www.huolg.net/html5/htm...
摘要：值得注意的是，這個設(shè)置對使用或其他絕對單位定義的字號大小無效。事實上，提供了一個在和間的相對單位折中解決方案，而且更易于使用。圖使用相對單位和繼承字號的面板下面是模板，加到你的頁面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其...
閱讀 1306·2021-11-23 09:51
閱讀 3421·2021-09-06 15:00
閱讀 996·2021-08-16 10:57
閱讀 1382·2019-08-30 12:46
閱讀 947·2019-08-29 12:22
閱讀 1615·2019-08-29 11:07
閱讀 3159·2019-08-26 11:23
閱讀 2993·2019-08-23 15:14
