在CSS中調整大小的最佳做法

Question

在CSS中調整項目大小的最簡單方法是什麼？我知道這有點主觀，但我會想象有一個明確的客觀答案。我應該如何調整文本，按鈕，表格等。最好是使用百分比，像素或其他方法，以便瀏覽器可以在每個瀏覽器上有效地重新調整大小並使其看起來相同？

Answer 1

文字大小：

這是更好地使用em的字體大小單位（因爲它更容易獲得，例如參見WCAG 2.0 Technique C14）。
這是一個相對單位，它沒有px的煩人錯誤，它比rem（2012年）更兼容。

下面是示出如何使用該em單元在一個rem樣的方式（至少塊元素，與需要劃分2號內聯元件等label和這樣）小提琴：http://jsfiddle.net/PhilippeVay/aQpLR/1/

佈局

我與（和我）一起工作的設計師喜歡居中定寬佈局。 940,960或980px寬度非常普遍。1004px是最大寬度，適用於具有全寬瀏覽器窗口的垂直滾動條的1024像素監視器。有些人從來沒有把他們的窗戶全寬，所以最好避免1004px。前3個寬度對12,16,20列的網格對齊很有用
子塊也是固定的寬度並且總是高度不變（除非在極少數情況下，我從不使用CSS height屬性，在需要時總是需要min-height背景圖像爲例）。它允許文本變焦倍率最高可達200​​％（見WCAG 2.0 Technique Failure F80）和塊時，有文字比最初計劃的下一行，不會胡作非爲......

表

有2種真的很不同的算法與或沒有table-layout: fixed。這兩個都很方便......這取決於。

按鈕

我用display: inline-block了不少與padding但在一些設計需要一個固定的寬度。真的取決於設計。

自適應網頁設計

而對於一個快速響應網站從沒有移動的第一個設計的設計，我使用媒體查詢（它成爲W3C Recommandation today，耶！:)）與這片代碼：basic stylesheet for mobile web（它是法文的，但CSS應該是不言自明的，它基本上重新設置最煩人的部分的寬度和高度，然後完成80％的工作）
有更好的方法（移動首先，仔細設計少數關鍵決議和適應等）;這一個只是快速。

Answer 2

取決於您製作的網站類型。如果它是一個動態寬度的網站，例如Wikipedia，這意味着它延伸到用戶瀏覽器的寬度，那麼您應該至少按百分比來確定一些事情，例如， 100％或50％，因此您可以設置頁面容器。

但是，大多數網站都是固定寬度，這意味着您認爲它是某些設置的像素寬度，例如， 900px。堆棧溢出是一個固定寬度的站點，但您會注意到頂部的欄橫跨整個監視器。你的容器和可能大部分的div，表格等將使用像素寬度。

一般來說，我選擇使用像素寬度進行造型，因爲它們可以更好地控制元素。如果你使用百分比寬度，你的元素的大小和形狀將在每個人的瀏覽器上發生變化，雖然這是一個很好的功能，但它使得編寫一個網站變得更加困難。

您提到您希望網站在所有瀏覽器中都保持一致。任何顯示器或瀏覽器上的像素都是相同的，所以它是確定元素大小的極好指標。

tl; dr使用像素寬度進行更好的設計控制。

Answer 3

這取決於你想達到什麼。固定佈局需要寬度爲像素單位，而響應/流體佈局需要寬度爲%。

說，當它是關於文本時，建議使用em而不是px，因爲它們允許純文本調整大小。這對於響應式網站來說尤其適用。同時，也可以使用em或%而不是px來聲明填充和邊距。

簡而言之，沒有「絕對真理」 - 取決於您的設計/項目，當涉及到佈局網格時，同時還有一些可訪問性問題，特別是對於舊版瀏覽器，使用像素來顯示字體。