用戶體驗第一 font-size放棄px選擇em
更新時間:2008年01月10日 16:51:34 作者:
用戶體驗第一 font-size放棄px選擇em
在如今這個提倡可用性設(shè)計以及用戶體驗設(shè)計的網(wǎng)絡時代,CSS也是要一同參與其中的。大部分人在CSS代碼編寫中總是先對整體定義字體尺寸,中文情況下一般為12px,而其實這樣以來在通過IE頂部菜單中的“察看-文字大小”設(shè)置已無任何作用。對字體感覺太小的瀏覽者而言無疑是種很不好的用戶體驗過程。其實這一切都可以避免,那就是使用em單位作為字體顯示單位。
瀏覽器的默認字體高都是16px,所以未經(jīng)調(diào)整的瀏覽器在顯示1em=16px。換算過來的話也就是說1px=0.0625em,也就是12px=0.75em, 10px=0.625em,通過1px=0.0625em大家可以在CSS編寫時通過px轉(zhuǎn)換成em。不過還有一種更方便的方法,繼續(xù)往下看!
這種方法要用到%單位(僅1次),其實%和em簡單的話可以理解成前者只是比后者多2個0。為了簡化font-size的換算,大家可以在css中的body中先全局聲明font-size=62.5%,這里的%的算法和em一樣,100%=16px,1px=6.25%,10px=62.5%,也就是定義了默認字體大小為10px。很多初學者可能會在此定義0.625em或者直接定義12px,這是沒有效果的,一定要定義font-size=62.5%!由于em具有會繼承父級出血元素的字體大小的特點,這是的1em=10px,所以12px=1.2em。px與em的轉(zhuǎn)換通過10就可以得來,很方便了吧!
此外有一點必須要注意,可能是IE處理漢字時,對于浮點的取值精確度有限,在body下62.5%出來的12px字體比直接定義的要大一點點,只要將62.5%換成63%就可以了。通過以上對CSS代碼的調(diào)整,你會發(fā)現(xiàn)自己的網(wǎng)站又向用戶體驗設(shè)計更靠近了一步,在如今這個提倡可用性設(shè)計以及用戶體驗設(shè)計的網(wǎng)絡時代這是很重要的。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
瀏覽器的默認字體高都是16px,所以未經(jīng)調(diào)整的瀏覽器在顯示1em=16px。換算過來的話也就是說1px=0.0625em,也就是12px=0.75em, 10px=0.625em,通過1px=0.0625em大家可以在CSS編寫時通過px轉(zhuǎn)換成em。不過還有一種更方便的方法,繼續(xù)往下看!
這種方法要用到%單位(僅1次),其實%和em簡單的話可以理解成前者只是比后者多2個0。為了簡化font-size的換算,大家可以在css中的body中先全局聲明font-size=62.5%,這里的%的算法和em一樣,100%=16px,1px=6.25%,10px=62.5%,也就是定義了默認字體大小為10px。很多初學者可能會在此定義0.625em或者直接定義12px,這是沒有效果的,一定要定義font-size=62.5%!由于em具有會繼承父級出血元素的字體大小的特點,這是的1em=10px,所以12px=1.2em。px與em的轉(zhuǎn)換通過10就可以得來,很方便了吧!
此外有一點必須要注意,可能是IE處理漢字時,對于浮點的取值精確度有限,在body下62.5%出來的12px字體比直接定義的要大一點點,只要將62.5%換成63%就可以了。通過以上對CSS代碼的調(diào)整,你會發(fā)現(xiàn)自己的網(wǎng)站又向用戶體驗設(shè)計更靠近了一步,在如今這個提倡可用性設(shè)計以及用戶體驗設(shè)計的網(wǎng)絡時代這是很重要的。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
解決ie動態(tài)修改link樣式,import css不刷新的問題
當我們需要動態(tài)更新link的樣式的時候,通常是直接修改link的 href 屬性。但是如果樣式里有import的樣式表,IE就不會在發(fā)起請求去刷新了(其他瀏覽器都是正常的)2008-05-05不用js多瀏覽器兼容純DIV/CSS對聯(lián)漂浮廣告代碼
兩側(cè)漂浮。經(jīng)測試,兼容IE6,IE7,F(xiàn)irefox瀏覽器2007-12-12使用display:none時隱藏DOM元素無法獲取實際寬高的解決方法
這篇文章主要介紹了使用display:none時隱藏DOM元素無法獲取實際寬高的解決方法的相關(guān)資料,需要的朋友可以參考下2022-07-07