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

資訊專欄INFORMATION COLUMN

CSS 單位 px rem em

CHENGKANG / 2718人閱讀

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

單位轉(zhuǎn)換工具

點我

px

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

特點

IE無法調(diào)整那些使用px作為單位的字體大?。s放）

國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位

Firefox能夠調(diào)整px和em，rem，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)

em

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

特點

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

body {
  font-size: 62.5%;
}

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

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

p {
  text-indent: 2em;
}
注意點

標(biāo)簽嵌套字體增大

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





  我是文字1
  
我是文字2

在上述例子中"我是文字2"會比"我是文字1"大，因為p的font-size屬性是基于1em = 12px的字高去計算自身內(nèi)部的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中使用同樣大小的字，不能設(shè)置為1.2em，只能設(shè)置為1em。

IE中12px的漢字偏大

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

該象只發(fā)生在12px的漢字，英文不存在此現(xiàn)象。
body {
  font-size: 63%;
}
rem

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

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

p {
  font-size: 14px;
  font-size: .875rem;
}
優(yōu)點

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





  
  我是文字1
  
我是文字2


必須設(shè)置html的css樣式，否則會按照默認的1rem = 16px。
缺點

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

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

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

相關(guān)文章

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

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

    Lucky_Boy 評論0 收藏0

  • 了解并使用<em>CSSem>中的<em>remem>單位

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

    BWrong 評論0 收藏0

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

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

    saucxs 評論0 收藏0

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

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

    teren 評論0 收藏0

  • 如何更愉快地使用<em>remem> —— 別說你懂<em>CSSem>相對單位

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

    Snailclimb 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<