成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS：區(qū)別 px、em、rem

shiweifu / 1734人閱讀

摘要：的使用是相對(duì)于其父級(jí)的字體大小的，即倍數(shù)。瀏覽器的默認(rèn)字體高都是，未經(jīng)調(diào)整的瀏覽器顯示。而且的關(guān)系不好轉(zhuǎn)換，因此，常常人為地使。明顯地，內(nèi)部?jī)?nèi)的文字受到了父級(jí)的影響。

有何區(qū)別

px 在縮放頁(yè)面時(shí)無(wú)法調(diào)整那些使用它作為單位的字體、按鈕等的大??；

em 的值并不是固定的，會(huì)繼承父級(jí)元素的字體大小，代表倍數(shù)；

rem 的值并不是固定的，始終是基于根元素 的，也代表倍數(shù)。

em

em 的使用是相對(duì)于其父級(jí)的字體大小的，即倍數(shù)。瀏覽器的默認(rèn)字體高都是 16px，未經(jīng)調(diào)整的瀏覽器顯示 1em = 16px。但是有一個(gè)問(wèn)題，如果設(shè)置 1.2em 則變成 19.2px，問(wèn)題是 px 表示大小時(shí)數(shù)值會(huì)忽略掉小數(shù)位的（你想像不出來(lái)半個(gè)像素吧）。而且 1em = 16px 的關(guān)系不好轉(zhuǎn)換，因此，常常人為地使?1em = 10px。這里要借助字體的 % 來(lái)作為橋梁。

因?yàn)槟J(rèn)時(shí)字體 16px =?100%，則有 10px =?62.5%。所以首先在?body 中全局聲明 font-size=62.5%=10px，也就是定義了網(wǎng)頁(yè) body 默認(rèn)字體大小為 10px，由于 em 有繼承父級(jí)元素字體大小的特性，如果某元素的父級(jí)沒(méi)有設(shè)定字體大小，那么它就繼續(xù)了 body 默認(rèn)字體大小?1em = 10px。

但是由于 em 是相對(duì)于其父級(jí)字體的倍數(shù)的，當(dāng)出現(xiàn)有多重嵌套內(nèi)容時(shí)，使用 em 分別給它們?cè)O(shè)置字體的大小往往要重新計(jì)算。比如說(shuō)你在父級(jí)中聲明了字體大小為 1.2em，那么在聲明子元素的字體大小時(shí)設(shè)置 1em 才能和父級(jí)元素內(nèi)容字體大小一致，而不是1.2em（避免 1.2*1.2=1.44em）, 因?yàn)榇?em 非彼 em。再舉個(gè)例子：

Outer inner outer
body { font-size: 62.5%; }
span { font-size: 1.6em; }

結(jié)果：外層 為 body 字體 10px 的 1.6倍 = 16px，內(nèi)層 為外層內(nèi)容字體 16px 的 1.6倍 = 25px（或26px，不同瀏覽器取舍小數(shù)不同）。

明顯地，內(nèi)部 內(nèi)的文字受到了父級(jí) 的影響?；谶@點(diǎn)，在實(shí)際使用中給我們的計(jì)算帶來(lái)了很大的不便。

rem

引述 MDN:

rem?values are relative to the root?html?element, not the parent element.

rem 的出現(xiàn)再也不用擔(dān)心還要根據(jù)父級(jí)元素的 font-size 計(jì)算 em 值了，因?yàn)樗冀K是基于根元素（）的。
比如默認(rèn)的 html font-size=16px，那么想設(shè)置 12px 的文字就是：12÷16=0.75(rem)
仍然是上面的例子，CSS改為：

html { font-size: 62.5%; }
span { font-size: 16px; font-size: 1.6rem; }

結(jié)果：內(nèi)外 的內(nèi)容均為 16px。

需要注意的是，為了兼容不支持 rem 的瀏覽器，我們需要在各個(gè)使用了 rem 地方前面寫上對(duì)應(yīng)的 px 值，這樣不支持的瀏覽器可以優(yōu)雅降級(jí)。兼容性詳情。

選擇使用什么字體單位主要由你的項(xiàng)目來(lái)決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用 rem，如果要考慮兼容性，那就使用 px，或者兩者同時(shí)使用。

完。

參考

淘寶UED：響應(yīng)式十日談第一日：使用 rem 設(shè)置文字大小

MDN: font-size

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111343.html

相關(guān)文章

  • 徹底弄懂<em>cssem>中單位<em>pxem>和em,rem的區(qū)別

    摘要：是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。引自手冊(cè)特點(diǎn)是新增的一個(gè)相對(duì)單位，根，這個(gè)單位引起了廣泛關(guān)注。目前，除了及更早版本外，所有瀏覽器均已支持。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫一個(gè)絕對(duì)單位的聲明。 國(guó)內(nèi)的設(shè)計(jì)師大都喜歡用px，而國(guó)外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別，又各自有什么優(yōu)劣呢？ PX特點(diǎn) IE無(wú)法調(diào)整那些使用px作為單位的字體大??； ...

    saucxs 評(píng)論0 收藏0

  • 深入理解<em>CSSem>中em, rem, ex區(qū)別，及使用技巧

    摘要：中常見(jiàn)尺寸單位描述百分比英寸厘米毫米一個(gè)是一個(gè)字體的。在中，是非常有用的單位，因?yàn)樗梢宰詣?dòng)適應(yīng)用戶所使用的字體。在中唯一例外的是屬性，它的和值指的是相對(duì)父元素的字體大小。 CSS 中常見(jiàn)尺寸 單位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 ex 一個(gè) ex 是一個(gè)字體的 x-height。 (x-height 通常是字體尺寸的一半。) pt ...

    lbool 評(píng)論0 收藏0

  • （<em>CSSem>） <em>pxem>，pt，em，rem的區(qū)別

    摘要：一絕對(duì)長(zhǎng)度單位絕對(duì)長(zhǎng)度單位代表一個(gè)物理測(cè)量，當(dāng)輸出介質(zhì)的物理性質(zhì)是已知的，如用于打印布局。對(duì)于打印機(jī)和高分辨率的屏幕，一個(gè)意味著多個(gè)設(shè)備像素，因此，每英寸的像素的數(shù)量保持在左右。是新增的單位，等于根元素的字體大小。 一、絕對(duì)長(zhǎng)度單位 絕對(duì)長(zhǎng)度單位代表一個(gè)物理測(cè)量，當(dāng)輸出介質(zhì)的物理性質(zhì)是已知的，如用于打印布局。這是通過(guò)將一個(gè)單元錨定到一個(gè)物理單元，并將其定義為相對(duì)于它的另一個(gè)。對(duì)于低分辨...

    Lemon_95 評(píng)論0 收藏0

  • 別再被各種單位迷惑：<em>pxem>/em/rem

    摘要：引自手冊(cè)是相對(duì)長(zhǎng)度單位。所有未經(jīng)調(diào)整的瀏覽器都符合。特點(diǎn)是新增的一個(gè)相對(duì)單位，根，這個(gè)單位引起了廣泛關(guān)注。目前，除了及更早版本外，所有瀏覽器均已支持。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫一個(gè)絕對(duì)單位的聲明。 在他處看到一篇好文章，想記錄在自己的學(xué)習(xí)筆記中，原文作者看到我轉(zhuǎn)載若是介意，聯(lián)系我立馬就刪除，附上原文鏈接：http://www.huolg.net/html5/htm...

    teren 評(píng)論0 收藏0

  • <em>pxem>、em和rem實(shí)戰(zhàn)經(jīng)驗(yàn)

    摘要：前言在自適應(yīng)布局或者移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，我們經(jīng)常會(huì)用到和兩個(gè)長(zhǎng)度單位。，相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。所有未經(jīng)調(diào)整的瀏覽器中都是。最大的優(yōu)點(diǎn)是提供一致尺寸，便于計(jì)算。為了還原設(shè)計(jì)稿和實(shí)現(xiàn)合理的布局所以需要根元素重寫。 前言 在自適應(yīng)布局或者移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，我們經(jīng)常會(huì)用到em和rem兩個(gè)長(zhǎng)度單位。接下來(lái)我們討論一下這兩個(gè)單位和px之間的區(qū)別，以及他們的使用場(chǎng)景等。 區(qū)別 ...

    xietao3 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<