網(wǎng)站怎么樣選擇使用字體單位

文字單位:px伶选、em史飞、rem、pt

下面談?wù)勥@幾種單位的區(qū)別以及如何選擇合適的單位:

如果您沒有規(guī)定字體大小考蕾,普通文本(比如段落)的默認(rèn)大小是16像素(16px=1em)祸憋。

任意瀏覽器的默認(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)?6px*62.5%=10px,這樣12px=1.2em, 10px=1em,也就是說只需要將你的原來的px數(shù)值除以10拦赠,然后換上em作為單位就行了。

font-size值可以是絕對或相對值葵姥。

絕對值:

>將文本設(shè)置為指定的大小

>不允許用戶在所有瀏覽器中改變文本大泻墒蟆(不利于可用性)

>絕對大小在確定了輸出的物理尺寸時很有用

相對大小:

>相對于周圍的元素來設(shè)置大小

>允許用戶在瀏覽器改變文本大小

1榔幸、PX特點(diǎn)

通過像素設(shè)置文本大小允乐,可以對文本大小進(jìn)行完全控制,設(shè)定多少就是多少

2削咆、EM特點(diǎn)

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

2. em會繼承父級元素的字體大小。(注:16等于父元素的默認(rèn)字體大小拨齐,假設(shè)父元素的font-size為20px鳞陨,那么公式需改為:pixels/20=em)

所以我們在寫CSS的時候,需要注意兩點(diǎn):

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

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

3.重新計(jì)算那些被放大的字體的em數(shù)值歼狼。避免字體大小的重復(fù)聲明掏导。

3、rem特點(diǎn)

rem是CSS3新增的一個相對單位(root em羽峰,根em)碘菜,這個單位引起了廣泛關(guān)注。這個單位與em有什么區(qū)別呢限寞?區(qū)別在于使用rem為元素設(shè)定字體大小時忍啸,仍然是相對大小,但相對的只是HTML根元素履植。這個單位是集相對大小和絕對大小的優(yōu)點(diǎn)于一身计雌,通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小,又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)玫霎。目前凿滤,除了IE8及更早版本外,所有瀏覽器均已支持rem庶近。對于不支持它的瀏覽器翁脆,應(yīng)對方法也很簡單,就是多寫一個絕對單位的聲明鼻种。這些瀏覽器會忽略用rem設(shè)定的字體大小反番。很適合用在手機(jī)的網(wǎng)站的開發(fā)中。

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

在所有瀏覽器中均有效的方案是為body元素(父元素)以百分比設(shè)置默認(rèn)的font-size值:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市罢缸,隨后出現(xiàn)的幾起案子篙贸,更是在濱河造成了極大的恐慌,老刑警劉巖枫疆,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件爵川,死亡現(xiàn)場離奇詭異,居然都是意外死亡息楔,警方通過查閱死者的電腦和手機(jī)寝贡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來值依,“玉大人兔甘,你說我怎么就攤上這事×郾酰” “怎么了洞焙?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長拯啦。 經(jīng)常有香客問我澡匪,道長,這世上最難降的妖魔是什么褒链? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任唁情,我火速辦了婚禮,結(jié)果婚禮上甫匹,老公的妹妹穿的比我還像新娘甸鸟。我一直安慰自己,他們只是感情好兵迅,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布抢韭。 她就那樣靜靜地躺著,像睡著了一般恍箭。 火紅的嫁衣襯著肌膚如雪刻恭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天扯夭,我揣著相機(jī)與錄音鳍贾,去河邊找鬼。 笑死交洗,一個胖子當(dāng)著我的面吹牛骑科,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播构拳,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼咆爽,長吁一口氣:“原來是場噩夢啊……” “哼梁棠!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起伍掀,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤掰茶,失蹤者是張志新(化名)和其女友劉穎暇藏,沒想到半個月后蜜笤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡盐碱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年把兔,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瓮顽。...
    茶點(diǎn)故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡县好,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出暖混,到底是詐尸還是另有隱情缕贡,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布拣播,位于F島的核電站晾咪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏贮配。R本人自食惡果不足惜谍倦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望泪勒。 院中可真熱鬧昼蛀,春花似錦、人聲如沸圆存。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽沦辙。三九已至送淆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間怕轿,已是汗流浹背偷崩。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留撞羽,地道東北人阐斜。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像诀紊,于是被迫代替她去往敵國和親谒出。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評論 2 344

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評論 1 92
  • 作者:HelKyle鏈接:http://www.w3cplus.com/css/when-to-use-em-vs...
    紅葉丶秋鳴閱讀 3,204評論 0 3
  • 基于html5的移動web頁面搭建技術(shù)總結(jié)1.技術(shù)要點(diǎn)1.1面向不同尺寸的手機(jī)屏幕笤喳,頁面布局適配問題为居。 網(wǎng)頁的he...
    敲代碼的張閱讀 309評論 0 0
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素;行內(nèi)(內(nèi)聯(lián)杀狡、inline-level)元素蒙畴。 塊元素的...
    饑人谷_小侯閱讀 1,985評論 1 4
  • 每當(dāng)身體不適,食欲不佳時呜象,總會想起母親做的炕土豆膳凝,金黃的土豆上點(diǎn)綴著碧綠的蔥花,土豆粉糯恭陡,鍋巴香脆蹬音,怎么吃都不膩。...
    土小豆007閱讀 707評論 11 10