CSS 中的 px托慨,em鼻由,rem,百分比

直奔主題厚棵!

一蕉世,px ---- 像素(Pixel)。

相對長度單位婆硬。

像素px是相對于顯示器屏幕分辨率而言的狠轻,作為開發(fā)人員,我們應(yīng)該經(jīng)常與 px 打交道彬犯。因此向楼,這里不再贅述查吊,只介紹 px 的特點:

1. IE無法調(diào)整那些使用px作為單位的字體大小湖蜕;

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

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

二,em ---- emphasize灭返。

em是相對長度單位盗迟。相對于當(dāng)前對象內(nèi)文本的字體尺寸。

如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置熙含,則相對于瀏覽器的默認(rèn)字體尺寸诈乒。

em特點:

1. em的值并不是固定的;

2. em會繼承父級元素的字體大小婆芦。


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

所以我們在寫CSS的時候,需要注意一下幾點:

1. body選擇器中聲明Font-size=62.5%氯材;

2. 將你的原來的px數(shù)值除以10渣锦,然后換上em作為單位;

3. 重新計算那些被放大的字體的em數(shù)值氢哮。避免字體大小的重復(fù)聲明袋毙。也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說你在#content中聲明了字體大小為1.2em冗尤,那么在聲明p的字體大小時就只能是1em听盖,而不是1.2em, 因為此em非彼em,它因繼承#content的字體高而變?yōu)榱?em=12px裂七。

三皆看,rem ---- root em

rem是CSS3新增的一個相對單位(root em,根em)背零,這個單位引起了廣泛關(guān)注腰吟。這個單位與em有什么區(qū)別呢?區(qū)別在于使用rem為元素設(shè)定字體大小時徙瓶,仍然是相對大小毛雇,但相對的只是HTML根元素录语。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身,通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小禾乘,又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)澎埠。目前,除了IE8及更早版本外始藕,所有瀏覽器均已支持rem蒲稳。對于不支持它的瀏覽器,應(yīng)對方法也很簡單伍派,就是多寫一個絕對單位的聲明江耀。這些瀏覽器會忽略用rem設(shè)定的字體大小。代碼示例如下:

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

四诉植,百分比

這個名詞我就不再解釋了祥国,不明白百分比什么意思的請點擊這里

CSS 中字體單位使用百分比晾腔,需要我們手動計算得到字體的百分比舌稀。有些麻煩,不常用灼擂。

五壁查,結(jié)語

使用什么樣的字體單位,主要由項目來決定剔应。我們可以根據(jù)項目的用戶群睡腿,選擇方便的字體單位來使用。比如峻贮,我們的用戶群都使用的是新版瀏覽器席怪,那么就可以選擇使用 rem;如果考慮到兼容性的問題纤控,我們可以使用 px挂捻,或者兩者都用。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嚼黔,一起剝皮案震驚了整個濱河市细层,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌唬涧,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盛撑,死亡現(xiàn)場離奇詭異碎节,居然都是意外死亡,警方通過查閱死者的電腦和手機抵卫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進(jìn)店門狮荔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來胎撇,“玉大人,你說我怎么就攤上這事殖氏⊥硎鳎” “怎么了?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵雅采,是天一觀的道長爵憎。 經(jīng)常有香客問我,道長婚瓜,這世上最難降的妖魔是什么宝鼓? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮巴刻,結(jié)果婚禮上愚铡,老公的妹妹穿的比我還像新娘。我一直安慰自己胡陪,他們只是感情好沥寥,可當(dāng)我...
    茶點故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著柠座,像睡著了一般营曼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上愚隧,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天蒂阱,我揣著相機與錄音,去河邊找鬼狂塘。 笑死录煤,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的荞胡。 我是一名探鬼主播妈踊,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼泪漂!你這毒婦竟也來了廊营?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤萝勤,失蹤者是張志新(化名)和其女友劉穎露筒,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體敌卓,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡慎式,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瘪吏。...
    茶點故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡癣防,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出掌眠,到底是詐尸還是另有隱情蕾盯,我是刑警寧澤,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布蓝丙,位于F島的核電站级遭,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏迅腔。R本人自食惡果不足惜装畅,卻給世界環(huán)境...
    茶點故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望沧烈。 院中可真熱鬧掠兄,春花似錦、人聲如沸锌雀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽腋逆。三九已至婿牍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間惩歉,已是汗流浹背等脂。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留撑蚌,地道東北人上遥。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像争涌,于是被迫代替她去往敵國和親粉楚。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內(nèi)容