px刹碾、em、rem 的區(qū)別

PX

px像素(Pixel)座柱。相對(duì)長(zhǎng)度單位迷帜。像素px是相對(duì)于顯示器屏幕分辨率而言的。

PX特點(diǎn)

  • IE無(wú)法調(diào)整那些使用px作為單位的字體大猩础戏锹;
  • 國(guó)外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了 em 或 rem 作為字體單位;
  • Firefox能夠調(diào)整 px 和 em火诸,rem锦针。

EM

em是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸置蜀。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置奈搜,則相對(duì)于瀏覽器的默認(rèn)字體尺寸。

EM特點(diǎn)

  • em的值并不是固定的盯荤;
  • em會(huì)繼承父級(jí)元素的字體大小馋吗。

注意:任意瀏覽器的默認(rèn)字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px秋秤。那么12px=0.75em,10px=0.625em宏粤。為了簡(jiǎn)化font-size的換算脚翘,需要在css中的body選擇器中聲明font-size=62.5%,這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說(shuō)只需要將你的原來(lái)的px數(shù)值除以10商架,然后換上em作為單位就行了堰怨。

所以我們?cè)趯慍SS的時(shí)候,需要注意:

  • body選擇器中聲明font-size=62.5%蛇摸;
  • 將你的原來(lái)的px數(shù)值除以10备图,然后換上em作為單位;
  • 重新計(jì)算那些被放大的字體的em數(shù)值赶袄。避免字體大小的重復(fù)聲明揽涮。

也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說(shuō)你在#content中聲明了字體大小為1.2em饿肺,那么在聲明p的字體大小時(shí)就只能是1em蒋困,而不是1.2em, 因?yàn)榇薳m非彼em,它因繼承#content的字體高而變?yōu)榱?em=12px敬辣。

REM

rem是CSS3新增的一個(gè)相對(duì)單位(root em雪标,根em),這個(gè)單位引起了廣泛關(guān)注溉跃。這個(gè)單位與em有什么區(qū)別呢村刨?區(qū)別在于使用rem為元素設(shè)定字體大小時(shí),仍然是相對(duì)大小撰茎,但相對(duì)的只是HTML根元素嵌牺。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身,通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小龄糊,又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)逆粹。目前,除了IE8及更早版本外炫惩,所有瀏覽器均已支持rem僻弹。對(duì)于不支持它的瀏覽器,應(yīng)對(duì)方法也很簡(jiǎn)單他嚷,就是多寫一個(gè)絕對(duì)單位的聲明奢方。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。下面就是一個(gè)例子:

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

注意: 選擇使用什么字體單位主要由你的項(xiàng)目來(lái)決定爸舒,如果你的用戶群都使用最新版的瀏覽器,那推薦使用rem稿蹲,如果要考慮兼容性扭勉,那就使用px,或者兩者同時(shí)使用苛聘。

px 與 rem 的選擇涂炎?

對(duì)于只需要適配少部分手機(jī)設(shè)備忠聚,且分辨率對(duì)頁(yè)面影響不大的,使用px即可 唱捣。

對(duì)于需要適配各種移動(dòng)設(shè)備两蟀,使用rem,例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備震缭。

源于:http://www.runoob.com/w3cnote/px-em-rem-different.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末赂毯,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子拣宰,更是在濱河造成了極大的恐慌党涕,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件巡社,死亡現(xiàn)場(chǎng)離奇詭異膛堤,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)晌该,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門肥荔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人朝群,你說(shuō)我怎么就攤上這事燕耿。” “怎么了潜圃?”我有些...
    開封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵缸棵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我谭期,道長(zhǎng)堵第,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任隧出,我火速辦了婚禮踏志,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘胀瞪。我一直安慰自己针余,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開白布凄诞。 她就那樣靜靜地躺著圆雁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪帆谍。 梳的紋絲不亂的頭發(fā)上伪朽,一...
    開封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音汛蝙,去河邊找鬼烈涮。 笑死朴肺,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的坚洽。 我是一名探鬼主播戈稿,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼讶舰!你這毒婦竟也來(lái)了鞍盗?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤绘雁,失蹤者是張志新(化名)和其女友劉穎橡疼,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體庐舟,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡欣除,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了挪略。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片历帚。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖杠娱,靈堂內(nèi)的尸體忽然破棺而出挽牢,到底是詐尸還是另有隱情,我是刑警寧澤摊求,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布禽拔,位于F島的核電站,受9級(jí)特大地震影響室叉,放射性物質(zhì)發(fā)生泄漏睹栖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一茧痕、第九天 我趴在偏房一處隱蔽的房頂上張望野来。 院中可真熱鬧,春花似錦踪旷、人聲如沸曼氛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)舀患。三九已至,卻和暖如春气破,著一層夾襖步出監(jiān)牢的瞬間构舟,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留狗超,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓朴下,卻偏偏與公主長(zhǎng)得像努咐,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子殴胧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

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

  • px 像素pixel,是一個(gè)相對(duì)長(zhǎng)度單位灸姊,是相對(duì)于顯示器屏幕分辨率而言的拱燃。 PX特點(diǎn) 1. IE無(wú)法調(diào)整那些使用p...
    伴歌知行閱讀 286評(píng)論 0 2
  • 這里向大家描述一下CSS中px和em的特點(diǎn)和區(qū)別,px像素(Pixel)甲喝,相對(duì)長(zhǎng)度單位尝苇,像素px是相對(duì)于顯示器屏幕...
    溫木先生閱讀 2,508評(píng)論 0 0
  • 國(guó)內(nèi)的設(shè)計(jì)師大都喜歡用px押袍,而國(guó)外的網(wǎng)站大都喜歡用em和rem诵冒,那么三者有什么區(qū)別,又各自有什么優(yōu)劣呢谊惭? px:像...
    ConRon閱讀 572評(píng)論 0 1
  • 一般我們?cè)趐c上主要是流動(dòng)式布局汽馋,采用的單位一般都是px,由于pc屏幕都是很大的圈盔,所以不用過(guò)多的擔(dān)心字體單位的選擇...
    miner敏兒閱讀 840評(píng)論 0 1
  • px:在web頁(yè)面制作的初期,我們都是使用“px”來(lái)設(shè)置我們的文本众眨,因?yàn)樗容^精確握牧。但是這種方法存在一個(gè)問題容诬,當(dāng)用...
    無(wú)言_4f45閱讀 369評(píng)論 0 0