CSS樣式最混亂的一個(gè)方面是應(yīng)用程序中文本擴(kuò)展的font-size屬性。在CSS中,你可以用四個(gè)不同的單位度量來顯示在web瀏覽器中的文本大小。這四個(gè)單位哪一種最適合Web? 這個(gè)問題引起了廣泛的爭(zhēng)論。找到一個(gè)確定的答案是困難的, 因?yàn)檫@個(gè)問題,本身就是如此難以回答。
　　接觸這些單位

　　1.  “Ems”(em):“em”是一個(gè)可伸縮的單位, 用于web文檔媒體展示。一個(gè)em等于當(dāng)前的字體大小,例如,如果文檔的字體大小是12 pt,1 em等于12 pt。Ems在本質(zhì)上是可伸縮的,所以2 em相當(dāng)于24 pt，.5 em相當(dāng)于6 pt等。ems由于其可伸縮性和適應(yīng)移動(dòng)設(shè)備的特性在web文檔中正變得越來越受歡迎。

　　2.  像素(px):像素是固定大小的單元,用于屏幕媒體(即在電腦屏幕上讀取)。一個(gè)像素等于電腦屏幕上的一個(gè)點(diǎn) (是你屏幕分辨率的最小分割)。許多網(wǎng)頁設(shè)計(jì)師在web文檔使用像素單位以生產(chǎn)瀏覽器渲染的像素完美呈現(xiàn)的網(wǎng)站。像素單元的一個(gè)問題是,它沒有為視障讀者的擴(kuò)展,以適應(yīng)移動(dòng)設(shè)備。

　　3.  點(diǎn)(pt):點(diǎn)通常用于印刷媒體(任何打印在紙上的媒體,等等)。一個(gè)點(diǎn)等于一英寸的1/72。點(diǎn)更像像素,他們是固定大小的單位,不能伸縮。

　　4. 百分比(%):百分比單位更像“em”單位,除了一些根本性的差異。首先,當(dāng)前的字體大小等于100%(比如12 pt = 100%)。當(dāng)使用百分比單位,你的文字在移動(dòng)設(shè)備上仍然保持完全的可伸縮性和可訪問性。
　　那么，區(qū)別是什么呢?

　　當(dāng)你動(dòng)態(tài)地觀察他們就很容易理解字體大小單位之間的區(qū)別。一般來說,1 em = 12 pt = 16 px = 100%。當(dāng)使用這些font-size, 增加基礎(chǔ)本字體大小(使用CSS選擇器)從100%到120%，讓我們看看會(huì)發(fā)生什么。

正如你所看到的, 隨著基本字體大小增加em和百分比單位變大,但px 和 pt 沒有變化。為你的文本設(shè)置一個(gè)絕對(duì)的大小很容易,但它是更容易在你的訪客使用可伸縮的文本,可以顯示任何設(shè)備或機(jī)器上。出于這個(gè)原因,em和百分比單位是web文檔文本的首選。
　　Em和percent的對(duì)比

　　我們定義點(diǎn)和像素單位不一定是最適合web文檔,留下來是的em和百分比單位。在理論上,em和百分比單位是相同的,但在應(yīng)用程序中,他們實(shí)際上有一些細(xì)微的差別需要著重考慮。

　　在上面的示例中,我們使用百分比單位作為我們的基礎(chǔ)字體大小(body上標(biāo)記)。如果你把你的字體大小從百分比變?yōu)閑ms(即body{font-size:1 em;}),你可能不會(huì)注意到有什么差別。讓我們看看當(dāng)“1 em”是我們的body字體大小,當(dāng)客戶端改變?yōu)g覽器的“文字大小”設(shè)置(這在一些瀏覽器中可用,如Internet Explorer)會(huì)發(fā)生什么。

當(dāng)客戶端的瀏覽器文本大小設(shè)置為“medium”, ems和百分比之間沒有區(qū)別。然而,當(dāng)設(shè)置改變,差別是相當(dāng)大的。“Smallest”設(shè)置,ems比百分比小得多,而當(dāng)設(shè)置為“Largest”,這時(shí)恰恰相反,ems比百分比顯示地更大。有些可能會(huì)說,當(dāng)真正去擴(kuò)展時(shí)em單位在擴(kuò)展,在實(shí)際的應(yīng)用程序中,em文本尺度變化太大, 在一些客戶端機(jī)器上最小的文本變得不是很清晰。

贏家:百分比(%)

　　一般來說,當(dāng)我開始一個(gè)新的設(shè)計(jì),我將在body元素上使用百分比(body { font-size: 62.5%; })，然后使用em單位大小來比較。只要body使用百分比單位設(shè)置,您可以選擇使用百分比或ems或其他任何CSS規(guī)則和選擇器并且在你的基礎(chǔ)字體大小上保持使用百分比的好處。在過去的幾年中,這確實(shí)成為設(shè)計(jì)的標(biāo)準(zhǔn)。

　　像素現(xiàn)在被認(rèn)為是可接受的字體大小單位(用戶可以使用瀏覽器的“縮放”功能讀小文本),雖然由于移動(dòng)設(shè)備非常高的密度屏幕(一些Android和iPhone設(shè)備每英寸超過200到 300個(gè)像素,讓你11 - 12-pixel字體很難看到!)他們也開始引起一些問題。因此,我將繼續(xù)使用百分比作為web文檔中的基礎(chǔ)字體大小。

　　結(jié)論

　　理論上,em單位是網(wǎng)上新的和即將到來的字體大小標(biāo)準(zhǔn),但在實(shí)踐中,百分比單位似乎給用戶提供一個(gè)更加一致的和可訪問的顯示。當(dāng)客戶端設(shè)置改變,百分比文本以合理的比例擴(kuò)展,允許設(shè)計(jì)師保持可讀性,可訪問性和視覺設(shè)計(jì)。

最新評(píng)論