設計網頁時我應該在 CSS 中使用哪個單位

Question

我已經設計和開發了 10 多個站點，但我仍然對我應該使用的正確單元有疑問。 應該是px ， em還是% ？

編輯 1：對於布局（特別是對於容器盒）

Answer 1

根據上下文不同的單位。 如果每種情況都有一個最好的，那么就不會有這么多單位了。

根據經驗法則：

如果您正在處理屏幕媒體：

• 使用%表示字體大小
• 對圖像使用px
• 使用px 、 %或em表示框大小
• 使用線高比率

如果您從事印刷媒體工作：

• 避免使用px可能是明智的（無論如何這都不是硬性規則），其他一切都是公平的游戲。 這真的取決於你想要多少控制。

Answer 2

沒有真正的對或錯，但作為一個經驗法則：

• 對於任何你想要某個固定大小的東西，請使用PX
• 對於任何你想用字體大小縮放的東西，使用EM
• 對於要縮放到窗口/容器中的可用空間的任何內容，請使用%

當涉及到用戶縮放瀏覽器的基本字體大小/縮放時，每個過去在不同瀏覽器中都有特定的優點或缺點，但更新版本的瀏覽器通過縮放所有內容來解決這些問題，而不僅僅是字體 -尺寸。

Answer 3

如果您在談論字體大小，那么 px 和 pt 並不理想。

Ems 和 Percent 單位是可擴展的，因此它們更易於訪問 - 對視障人士友好。 它們還可以很好地縮小手機用戶的規模。

Px 和 Pt 單位對於視障用戶不會向上縮放，對於移動電話不會向下縮放。

如果您談論的是布局或容器，那么這取決於您想要的設計類型 - 流體或靜態 - 並且不一定有“正確”的答案。

不舉一個例子，很難給出建議。 你有一個我們可以看看的網站嗎？

Answer 4

在特定上下文中使用您需要的單位。

Unit   Description
====================
%   percentage
in  inch
cm  centimeter
mm  millimeter
em  1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex  one ex is the x-height of a font (x-height is usually about half the font-size)
pt  point (1 pt is the same as 1/72 inch)
pc  pica (1 pc is the same as 12 points)
px  pixels (a dot on the computer screen)

來源： http : //www.w3schools.com/css/css_units.asp

Answer 5

為了靈活性和可訪問性，我建議將%用於水平度量（相對於用戶的屏幕），將em用於垂直度量（相對於用戶的字體設置）。

Answer 6

對於固定寬度布局

對於像素完美，我建議使用PX作為寬度、高度、邊距和填充

對於line-height使用無單位值，如{line-height:1.2}

對於排版元素使用{font-size:62.5%)作為body然后使用em作為其他元素

在 HTML 中<img>總是使用無單位的 width 和 height 。