国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
CSS3的REM設(shè)置字體大小

 在Web中使用什么單位來定義頁面的字體大小,至今天為止都還在激烈的爭論著,有人說PX做為單位好,有人說EM優(yōu)點(diǎn)多,還有人在說百分比方便,以至于出現(xiàn)了CSS Font-Size: em vs. px vs. pt vs. percent這樣的PK大局。不幸的是,仍然有不同的利弊,使各種技術(shù)都不太理想,但又無法不去用。真是進(jìn)也難,退也難呀。

最近在學(xué)習(xí)em的相關(guān)知識的時候,無意之間讓我拾得一寶,就是使用rem來設(shè)置Web頁面的字體大小。讓我一下子就來勁了,一口氣看完并測試了一回,還真是爽歪歪的呀。師傅說好東西不能吃獨(dú)食,于我就在這里給大家吹吹這個從沒見過的REM。

在詳細(xì)介紹rem之前,我們先一起來回顧一下我們常用的兩種記量單位,也是備受爭論的兩個:

  1.  PX為單位
  2.  EM為單位

PX為單位

在Web頁面初期制作中,我們都是使用“px”來設(shè)置我們的文本,因?yàn)樗容^穩(wěn)定和精確。但是這種方法存在一個問題,當(dāng)用戶在瀏覽器中瀏覽我們制作的Web頁面時,他改變了瀏覽器的字體大小,這時會使用我們的Web頁面布局被打破。這樣對于那些關(guān)心自己網(wǎng)站可用性的用戶來說,就是一個大問題了。因此,這時就提出了使用“em”來定義Web頁面的字體。

em為單位

前面也說了,使用是“px”為單位是比較方便,而又一致,但在瀏覽器中放大或縮放瀏覽頁面時會存在一個問題,要解決這個問題,我們可以使用“em”單位。Richard Rutter'在《How to size text using ems》一文中有做過詳細(xì)的介紹,追至早一點(diǎn),Richard Rutter也在《How to Size Text in CSS》中進(jìn)行過深入的剖析。

這種技術(shù)需要一個參考點(diǎn),一般都是以<body>的“font-size”為基準(zhǔn)。比如說我們使用“1em”等于“10px”來改變默認(rèn)值“1em=16px”,這樣一來,我們設(shè)置字體大小相當(dāng)于“14px”時,只需要將其值設(shè)置為“1.4em”。

  1. <span class="tag" style="">body</span> <span class="rules" style="">{  
  2.     <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">font-size</span>:<span class="value" style=""> <span class="number" style="color:rgb(42,161,152)">62.5</span>%;</span></span><span class="comment" style="color:rgb(88,110,117); font-style:italic">/*10 ÷ 16 × 100% = 62.5%*/</span>  
  3. <span class="rule" style="">}</span></span>  
  4. <span class="tag" style="">h1</span> <span class="rules" style="">{  
  5.     <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">font-size</span>:<span class="value" style=""> <span class="number" style="color:rgb(42,161,152)">2.4</span>em;</span></span> <span class="comment" style="color:rgb(88,110,117); font-style:italic">/*2.4em × 10 = 24px */</span>  
  6. <span class="rule" style="">}</span></span>  
  7. <span class="tag" style="">p</span> <span class="rules" style="">{  
  8.     <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">font-size</span>:<span class="value" style=""> <span class="number" style="color:rgb(42,161,152)">1.4</span>em;</span></span> <span class="comment" style="color:rgb(88,110,117); font-style:italic">/*1.4em × 10 = 14px */</span>  
  9. <span class="rule" style="">}</span></span>  
  10. <span class="tag" style="">li</span> <span class="rules" style="">{  
  11.     <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">font-size</span>:<span class="value" style=""> <span class="number" style="color:rgb(42,161,152)">1.4</span>em;</span></span> <span class="comment" style="color:rgb(88,110,117); font-style:italic">/*1.4 × ? = 14px ? */</span>  
  12. <span class="rule" style="">}</span></span>  

為什么“l(fā)i”的“1.4em”是不是“14px”將是一個問號呢?如果你了解過“em”后,你會覺得這個問題是多問的。前面也簡單的介紹過一回,在使用“em”作單位時,一定需要知道其父元素的設(shè)置,因?yàn)椤癳m”就是一個相對值,而且是一個相對于父元素的值,其真正的計(jì)算公式是:

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值

這樣的情況下“1.4em”可以是“14px”,也可以是“20px”,或者說是“24px”,總之是一個不確定值,那么解決這樣的問題,要么你知道其父元素的值,要么呢在任何子元素中都使用“1em”。這樣一來可能又不是我們所需要的方法。

這里我只是簡單的介紹了一個這兩個單位的使用,具體一點(diǎn)的大家可以參閱:

  1.  Best Practices的站長Kyle的《CSS Font-Size: em vs. px vs. pt vs. percent
  2.  Converting px into percentage and em for relative CSS font sizes
  3.  Em Vs Percent Widths
  4.  CSS: Units of Measurement
  5.  Jennifer KyrninUsing Points, Pixels, Ems, or Percentages for CSS Fonts

Rem為單位

CSS3的出現(xiàn),他同時引進(jìn)了一些新的單位,包括我們今天所說的rem。在W3C官網(wǎng)上是這樣描述rem的——“font size of the root element” 。下面我們就一起來詳細(xì)的了解rem

前面說了“em”是相對于其父元素來設(shè)置字體大小的,這樣就會存在一個問題,進(jìn)行任何元素設(shè)置,都有可能需要知道他父元素的大小,在我們多次使用時,就會帶來無法預(yù)知的錯誤風(fēng)險。而rem是相對于根元素<html>,這樣就意味著,我們只需要在根元素確定一個參考值,,在根元素中設(shè)置多大的字體,這完全可以根據(jù)您自己的需,大家也可以參考下圖:

我們來看一個簡單的代碼實(shí)例:

  1. <span class="tag" style="">html</span> <span class="rules" style="">{<span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">font-size</span>:<span class="value" style=""> <span class="number" style="color:rgb(42,161,152)">62.5</span>%;</span></span><span class="comment" style="color:rgb(88,110,117); font-style:italic">/*10 ÷ 16 × 100% = 62.5%*/</span><span class="rule" style="">}</span></span>  
  2. <span class="tag" style="">body</span> <span class="rules" style="">{<span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">font-size</span>:<span class="value" style=""> <span class="number" style="color:rgb(42,161,152)">1.4</span>rem;</span></span><span class="comment" style="color:rgb(88,110,117); font-style:italic">/*1.4 × 10px = 14px */</span><span class="rule" style="">}</span></span>  
  3. <span class="tag" style="">h1</span> <span class="rules" style="">{ <span class="rule" style=""><span class="attribute" style="color:rgb(181,137,0)">font-size</span>:<span class="value" style=""> <span class="number" style="color:rgb(42,161,152)">2.4</span>rem;</span></span><span class="comment" style="color:rgb(88,110,117); font-style:italic">/*2.4 × 10px = 24px*/</span><span class="rule" style="">}</span></span>  

我在根元素<html>中定義了一個基本字體大小為62.5%(也就是10px。設(shè)置這個值主要方便計(jì)算,如果沒有設(shè)置,將是以“16px”為基準(zhǔn) )。從上面的計(jì)算結(jié)果,我們使用“rem”就像使用“px”一樣的方便,而且同時解決了“px”和“em”兩者不同之處。

瀏覽器的兼容性

remCSS3新引進(jìn)來的一個度量單位,大家心里肯定會覺得心灰意冷呀,擔(dān)心瀏覽器的支持情況。其實(shí)大家不用害怕,你可能會驚訝,支持的瀏覽器還是蠻多的,比如:Mozilla Firefox 3.6+Apple Safari 5+、Google Chrome、IE9+Opera11+。只是可憐的IE6-8無法,你們就把他們當(dāng)透明了吧,我向來都是如此。

不過使用單位設(shè)置字體,可不能完全不考慮IE了,如果你想使用這個REM,但也想兼容IE下的效果,可你可考慮“px”和“rem”一起使用,用"px"來實(shí)現(xiàn)IE6-8下的效果,然后使用“Rem”來實(shí)現(xiàn)代瀏覽器的效果。就讓IE6-8不能隨文字的改變而改變吧,誰讓這個Ie6-8這么老呢?哈。。。。大家不仿試試,還蠻有意思,說不定這個就是主流的度量單位了。

from:http://www.w3cplus.com/CSS3/define-font-size-with-css3-rem

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
胰島素劑量怎么調(diào)?這份技巧請收好
<span style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400;">何謂“古風(fēng)圈”</span>
<span style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400;">天忽作晴山卷幔 云猶含態(tài)石披衣</span>
<b style="color: rgb(0, 0, 0); font-size: 14px;">秦漢</b><span style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400;">(公元前221年-公元202年)</span
種菜:<span style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400;">自己養(yǎng)的草莓,熟了都不舍得吃~~</span>
上課老師具有博<span style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400;">士學(xué)位,</span><span style="color: rgb(0, 0, 0); font-size: 14px; font-weight: 400;&qu
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服