css字體大小:em與px、pt、百分比之間的對比

　　接觸這些單位

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

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

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

　　4. 百分比(%):百分比單位更像“em”單位,除了一些根本性的差異。首先,當前的字體大小等于100%(比如12 pt = 100%)。當使用百分比單位,你的文字在移動設備上仍然保持完全的可伸縮性和可訪問性。

　　那么，區別是什么呢?

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

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

　　Em和percent的對比

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

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

　　當客戶端的瀏覽器文本大小設置為“medium”, ems和百分比之間沒有區別。然而,當設置改變,差別是相當大的?！癝mallest”設置,ems比百分比小得多,而當設置為“Largest”,這時恰恰相反,ems比百分比顯示地更大。有些可能會說,當真正去擴展時em單位在擴展,在實際的應用程序中,em文本尺度變化太大, 在一些客戶端機器上最小的文本變得不是很清晰。

　　結論

　　理論上,em單位是網上新的和即將到來的字體大小標準,但在實踐中,百分比單位似乎給用戶提供一個更加一致的和可訪問的顯示。當客戶端設置改變,百分比文本以合理的比例擴展,允許設計師保持可讀性,可訪問性和視覺設計。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com