像素與HTML / CSS中的點數

Question

在創建HTML頁面時，我應該指定像帶有像素的margin或帶有CSS的點嗎？

其中一個被認為是比另一個更好的做法嗎？ 任何一個的優點或缺點？

Answer 1

使用px或em

• CSS FONT-SIZE：EM VS. PX VS. PT VS. 百分

點數（pt）：傳統上在打印介質中使用的點（任何要在紙上打印的東西等）。 一點等於1/72英寸。 點很像像素，因為它們是固定大小的單位，不能縮放。

通常， 1em = 12pt = 16px = 100％。

[結論]

獲勝者：百分比（％）。

• JohnB注意： 這是針對TEXT的。 顯然你問的是“像利潤這樣的東西”。 （我假設你的意思是padding 。）為此，我會推薦px或em 。 就個人而言，我會根據具體情況進行切換。

更多文章

• px - em - ％ - pt - 關鍵字

點值僅適用於打印CSS！

（進一步評論）

積分是否適合打印？ 不。

積分不是專門用於打印的。 從理論上講，要點是用於定義絕對量度。 像素不是絕對的，因為根據您的屏幕和所選擇的定義（不是分辨率），分辨率（每英寸像素數）可以從很多（150dpi）或非常小（75dpi）。 這意味着您的像素可以是一個大小，也可以是那個大小的一半。 這意味着您在屏幕上設計得非常清晰的文字可能在您的客戶屏幕上看起來太大（“請將文字縮小，好嗎？”）或太小而無法在鄰居的屏幕上閱讀（“嘿，網站是你前幾天告訴我的那個？你說過你曾經做過的那個......好吧我讀不懂文字，它太小了“）。

積分是這個問題的解決方案。 但是瀏覽器和操作系統需要管理它們。 基本上，它意味着：

瀏覽器必須使用給定值（例如10pt）和屏幕的真實分辨率計算顯示尺寸（以像素為單位）; 操作系統必須傳達真實的當前分辨率，而不是默認值。

也：

• CSS：比較字體大小，百分比，Em，Point和Pixel

Answer 2

經驗法則是：

用於屏幕顯示的像素; 打印點。

'em'或'％'（以及鮮為人知的rem ）更適合更靈活的布局。

em是基於當前字體中字母“m”的大小的度量單位。 在em中指定大小允許您根據字體大小設置大小，這意味着您可以更改字體，並且布局將更改為跟隨。

但是有很多時候你需要使用固定的尺寸。 在這種情況下， px通常是最好的，因為大多數網頁都顯示在基於像素的屏幕上。 但是，如果您計划打印一個頁面，那么您可以使用基於點的布局創建特定於打印的樣式表。

一般來說，我會建議em在px或pt 。 如果您正在使用px ，那是因為您的頁面上有元素，這些元素的大小以像素為單位，您需要將其余的布局符合。 在這種情況下，因為圖像是以像素為單位的，所以樣式表也是如此。 此外，由於點是打印測量單位，因此無法保證它們將如何顯示在屏幕上：px是基於屏幕的，因此可以在屏幕上跨瀏覽器和跨平台提供更加一致的外觀。

順便說一下，這個頁面可能會為您提供更多信息： http ： //webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

Answer 3

積分很高，因為它們高1/72英寸 。 你知道你的文字有多高。 像素問題是分辨率越高它們越小。 如果你想在背景圖片周圍包裝文字，像素是很棒的 。 需要一些工作，但它可以使一個漂亮的頁面。 我聽說像素在IE中無法調整大小 - 所以如果他們想要增加字體大小，他們就不能。 不要使用IE，所以我不能說。 記得聽到這個。 EM讓你完全放棄了這個人在瀏覽器中定義字體大小的方式。 Ems和百分比使其變得簡單。 我總是使用積分。

[...]

不， 積分不是最好的 。 對於找到這個帖子的人，忘記你曾經讀過這個帖子。 這是一個網頁設計論壇。 用於在屏幕媒體上顯示頁面。 CSS中包含的點僅用於打印設計。 用於打印介質樣式表。 它們不像％和ems那樣可擴展 。 如果您是任何類型的網頁設計師，您應該努力使您的網頁可訪問，並且使用積分是針對頂部的權利。

http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html

這很有趣，每個人都回答“像素或％/ em”，而不是“像素或點”。

我不知道兩者之間有什么區別。

更多信息

編輯： 更多信息......官方的！

不要以pt為單位指定font-size，也不要為屏幕樣式表指定其他絕對長度單位。 它們在不同平台上呈現不一致，並且無法由用戶代理（例如瀏覽器）調整大小。 在具有固定和已知物理屬性（例如打印）的介質上保留此類單元的樣式用於樣式 。

Answer 4

John B的上述答案是最好和最准確的。 我只是想指出他上面的答案可能造成的混亂。 排版中的“em”是您選擇的字體中字母“m”的寬度。 要指定字體的高度，打印機/排字機使用“x height”，這是字體的小寫字母x的高度。

正如約翰所指出的那樣，pt是一個固定的測量單位，等於1/72英寸。 由於顯示器具有不同的像素密度（72 /英寸，96 /英寸......），因此通常不是在HTML文檔中調整大小的好方法。

它們與舊的排版單元直接相關，並且是一個很好的相對測量。 隨着屏幕尺寸的縮放，字體大小隨之縮放。 如果你使用em作為邊距，它們會相對於你的字體大小進行縮放，這通常是一件好事。

但是，對於邊距，填充和所有不直接與字體相關的東西，最好使用rem或“relative ems”。 最好的方法是首先聲明身體或html標簽的默認字體大小。 像body-size = 16px之類的東西是一個很好的起點。 然后文檔中的其他地方都使用em來表示文本，而rem則用於其他所有內容。 或者，使用百分比。 兩者都可以正常工作。 與em和rem一樣，你的％相對於原始的16px = 100％的字體大小。

文檔中的所有內容都將相對於您的初始設置進行縮放，以100p字體大小為16px。 這樣，您只需在文檔中使用一次像素測量。 如果您以后想要設置媒體查詢以調整大小和邊距以適應不同設備顯示器上的不同像素密度，則此功能非常有用。 您只需要在body標簽中查詢該初始聲明。 其他所有內容都會相對於此調整，不需要更改。

只是一個想法，maxw3st

Answer 5

任何告訴你使用像素的人都是錯的 。 像素工作正常，但根本不需要它們......永遠！ 積分是指定絕對量度的完美方式，對於我們通常在網絡上工作的量表，它們通常不是首選度量。

除了點之外，還有異食癖，英寸，厘米等。 選擇其中一個比另一個更像是在說，“我應該用英尺或英寸來測量這個房間嗎？” 讓常識成為您的指導。 他們都會完成工作。

在某些答案中出現的Em應該在適當的時候保留。 也就是說，“當這個東西縮放時，我希望這個其他東西可以擴展”。 這就是相對措施的目的。 我知道這是你原來問題的范圍，但我不得不解決一些關於“總是使用em”的廢話。

順便說一句，像素不等於物理像素。 今天，樣式表中的px表示1/96英寸。 這就是為什么我說不要使用它們。 大多數人都不知道這一點。 他們使用他們認為他們指定實際像素。 我不能認真地對待這些人（雖然我不怪人，但我責怪事物狀態的混亂性質，這就是為什么我要爭取像素消失的原因。）。 此外，如果像素真的意味着像素，那么它們就是指定尺寸的可怕方式。 談論事物將根據無法控制的任意屏幕分辨率隨機縮小和增長的事實。 哎呀！ 遠離像素!!! 在實踐中它們起作用，但僅僅是因為捏造瀏覽器制造商和操作系統人員看不見的努力，理論上它們是指定你的意圖的一種非常模糊的方式。

Answer 6

像素對我來說更美觀，我相信它被認為是更好的做法......

Answer 7

我認為這取決於你想要做什么。

我發現關鍵問題是需要用窗口調整距離嗎？ 有些單位是相對的，有些單位（如像素和點數）不是 - 這里有一個簡短的描述。

我沒有看到使用過多的點，當需要絕對測量時，px似乎更常見。

Answer 8

答案是：這取決於。 你用什么利潤？ 它們是平衡，可調整大小的布局的集成部分，還是只是在邊緣提供了一條排水溝？ 在第一種情況下，百分比效果更好，而在第二種情況下像素效果很好。

您應該嘗試不同的可能性，並確定哪種方法最適合您的文檔。 由於在這種情況下沒有“對與錯”，您可以選擇最適合您的答案。

Answer 9

幾乎所有東西都使用像素。

對我而言，它“感覺”就像我有更精確的控制。

對於我需要使用窗口動態調整大小的一些內容，我使用百分比。

編輯：

什么是“em”？