CSS 單位 px rem em

CHENGKANG 發布于2019-08-29 13:08 / 2709人閱讀

摘要：所以未經調整的瀏覽器都符合。原因可能是處理漢字時，對于浮點的取值精確度有限。是新增的一個相對單位，根。目前，除了及更早版本外，所有瀏覽器均已支持。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。

單位轉換工具

點我

px是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI(Dots Per Inch，每英寸像素數)，在掃描打印時一般都有DPI可選。Windows系統默認是96dpi，Apple系統默認是72dpi。

特點

IE無法調整那些使用px作為單位的字體大小（縮放）

國外的大部分網站能夠調整的原因在于其使用了em或rem作為字體單位

Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)

em 指字體高，所有瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。為了簡化font -size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。

特點

1em指的是一個字體的大小，它會繼承父級元素的字體大小，所以不是一個固定的值。任何瀏覽器的默認字體大小都是16px。所以12px = 0.75em。實際應用中為了方便換算，通常會如下設置樣式：

body {
  font-size: 62.5%;
}

這樣，1em = 10px。常用的1.2em上就是12px。

在中文文章的格式中，每個段落開頭都要空出2格，如果用px做單位，對于12px的字體則需要24px，以此類推，但是對于em來說就相對簡單了。

p {
  text-indent: 2em;
}

注意點

標簽嵌套字體增大

em是想對父元素的font-size屬性來決定字高的。那么在多級嵌套下就會出現1.2em * 1.2em = 1.44em的問題出現。如：




  我是文字1
  我是文字2

在上述例子中"我是文字2"會比"我是文字1"大，因為p的font-size屬性是基于1em = 12px的字高去計算自身內部的em值：

/* 1em = 16px -> 計算后 1em = 10px */
body { font-size: 62.5%; }

/* 1em = 10px -> 計算后 1em = 12px */
/* 在container中的字體 都會為12px */
.container { font-size: 1.2em; }

/* 1em = 12px -> 計算后 1em = 14.4px */
/* 在p中的字體 都會為14.4px */
.container p { font-size: 1.2em; }

所以如果想在p中使用同樣大小的字，不能設置為1.2em，只能設置為1em。

IE中12px的漢字偏大

12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小，而是稍大一點。你只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時，對于浮點的取值精確度有限。

該象只發生在12px的漢字，英文不存在此現象。

body {
  font-size: 63%;
}

rem

rem是CSS3新增的一個相對單位（root em，根em）。這個單位與em的區別在于使用rem相對的是HTML根元素。只要根元素不修改font-size屬性，那么rem的想對大小不會變，而em是相對父元素的font-size設置想對大小。

可以避免em字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

p {
  font-size: 14px;
  font-size: .875rem;
}

優點

不會出現像em那樣1.2em * 1.2em = 1.44em的情況出現，因為rem是相對html的font-size設置，而em是相對父元素的font-size




  
  我是文字1
  我是文字2

必須設置html的css樣式，否則會按照默認的1rem = 16px。

缺點

CSS3新增的特性，所以只有支持C3的瀏覽器才兼容。解決方法低版本瀏覽器使用px，高版本使用rem。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112395.html

CSSem>單位：pxem>、em、remem>

摘要：在平時的工作當中，我發現自己大多數時候是用來作為字體單位的，不僅如此，其實公司的所有前端項目都是以作為字體單位的。我們知道像素作為相對長度單位是相對于顯示器的分辨率而言的。很好地解決了的字體大小從父元素繼承所帶來的不便。 px 在平時的工作當中，我發現自己大多數時候是用px來作為CSS字體單位的，不僅如此，其實公司的所有前端項目都是以px作為CSS字體單位的。我們知道px（像素）作為C...

Lucky_Boy 2019-08-29 12:22 評論0 收藏0
了解并使用CSSem>中的remem>單位

摘要：寫了一篇文章，里面記錄了他在實際使用單位過程中的一些感受。他的解決方式充分利用了到目前為止我們遇到的三種單位。根元素的長度單位依舊采用，模塊用單位，模塊內的元素使用單位。隨后在中單位的強大之處提出了他的觀點。什么是 rem 可能在你使用收音機或者用其他音樂播放器之前，就已經聽過R.E.M.這個詞了。在這個樂隊眼中，這個詞是淺睡眠時眼球的快速轉動的縮寫，而在 css 中，rem 代表著...

BWrong 2019-08-29 11:32 評論0 收藏0
徹底弄懂cssem>中單位pxem>和em,remem>的區別

摘要：是相對長度單位。相對于當前對象內文本的字體尺寸。引自手冊特點是新增的一個相對單位，根，這個單位引起了廣泛關注。目前，除了及更早版本外，所有瀏覽器均已支持。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。國內的設計師大都喜歡用px，而國外的網站大都喜歡用em和rem，那么三者有什么區別，又各自有什么優劣呢？ PX特點 IE無法調整那些使用px作為單位的字體大小； ...

saucxs 2019-08-29 12:25 評論0 收藏0
別再被各種單位迷惑：pxem>/em/remem>

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

teren 2019-08-28 18:26 評論0 收藏0
如何更愉快地使用remem> —— 別說你懂CSSem>相對單位

摘要：值得注意的是，這個設置對使用或其他絕對單位定義的字號大小無效。事實上，提供了一個在和間的相對單位折中解決方案，而且更易于使用。圖使用相對單位和繼承字號的面板下面是模板，加到你的頁面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其...

Snailclimb 2019-08-30 15:54 評論0 收藏0