這篇文章主要介紹css長(zhǎng)度單位em，px，rem分別有什么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、珠暉網(wǎng)站維護(hù)、網(wǎng)站推廣。

一、使用em或px來(lái)設(shè)置字體的大小

CSS從排版里繼承了單位pt（point）和pc（pica）。 傳統(tǒng)打印機(jī)上使用，并優(yōu)先于類似的單位cm或 in。在CSS中有理由不使用單位pt，可以使用你喜歡的任何單位。 我們一個(gè)很好的理由使用既不pt也沒(méi)有任何其他絕對(duì)單位（），那就是使用em和px。

這里有幾行不同的厚度。 它們中的一些或全部可能看起來(lái)很清晰，但至少1px和2px線應(yīng)該清晰可見(jiàn)：

如果前四行看起來(lái)都相同（或者如果缺少0.5pt線），你可能正在計(jì)算機(jī)顯示器上查看無(wú)法顯示小于1px的點(diǎn)。 如果線條的厚度增加，你可能會(huì)在高質(zhì)量的計(jì)算機(jī)屏幕或紙張上查看此頁(yè)面。 如果1pt看起來(lái)比1.5px厚，你可能有一個(gè)手持屏幕。

CSS的神奇單位：px，通常是一個(gè)很好的單位，特別是如果樣式需要文本與圖像對(duì)齊，或者只是因?yàn)?px寬或1px的倍數(shù)保證看起來(lái)很清晰。

但對(duì)于字體大小，它甚至更好用em。這個(gè)想法是（1）不設(shè)置BODY元素的字體大?。ㄓ肏TML格式），而是使用設(shè)備的默認(rèn)大小，因?yàn)檫@是讀者可以舒適閱讀的大小; （2）表示其他元素的字體大小em：H1 {font-size: 2.5em}使H1為普通正文字體的2?倍。

在這里你可以使用的唯一的地方pt（或cm或in）用于設(shè)置字體大小是在樣式表打印，如果你需要確保印刷字體是完全具有一定規(guī)模。但即使使用默認(rèn)字體大小通常更好。

因?yàn)?，px單位可以防止你知道設(shè)備的分辨率。 無(wú)論輸出是96dpi，100dpi，220dpi還是1800dpi，它都整數(shù)px長(zhǎng)度來(lái)表示，總是看起來(lái)很好并且在所有設(shè)備上非常相似。 但是，如果你想知道設(shè)備的分辨率，例如，知道使用0.5px線是否安全，該怎么辦？ 答案是通過(guò)媒體查詢檢查分辨率。 解釋媒體查詢超出了本文的范圍，但這是一個(gè)小例子：

div.mybox {
   border：2px solid;
}
@media（min-resolution：2dppx）{
  / *每px有2個(gè)或更多點(diǎn)的介質(zhì)* /
  div.mybox {
     border：1.5px solid;
  }
}

二、css的新增單位：rem

為了更容易編寫僅依賴于默認(rèn)字體大小的樣式規(guī)則，CSS自2013年起就有了一個(gè)新的單位：rem。 rem（對(duì)于“root em”）是文檔根元素的字體大小。與em元素的區(qū)別在于，rem在整個(gè)文檔中是不變的。 例如，為p和h2元素提供相同的左邊距，比較2013年之前的樣式表：

p {margin-left：1em}
h2 {font-size：3em; margin-left：0.333em}

新版本：

p {margin-left：1rem}
h2 {font-size：3em; margin-left：1rem}

css還有其他一些新單位，可以指定相對(duì)于閱讀器窗口的大小，這就是vw和vh。vw是窗口寬度的1/100，vh是窗口高度的1/100。還有vmin，代表vw和vh中最小的。vmax，代表vw和vh中最大的。

因?yàn)樗鼈兪侨绱诵路f，它們還沒(méi)有辦法在任何地方使用。但是，截至2015年初，一些瀏覽器已經(jīng)可以支持它們了。

以上是“css長(zhǎng)度單位em，px，rem分別有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！