了解Web瀏覽器如何使用百分比值確定顯示
響應式網頁設計的許多學生在使用百分比寬度值時遇到困難。 具體而言，瀏覽器如何計算這些百分比存在混淆。 以下您可以在響應式網站中找到有關百分比如何用於寬度計算的詳細說明。
使用像素寬度值
將像素用作寬度值時，結果非常直觀。 如果您使用CSS將文檔標題中元素的寬度值設置為100像素寬，則該元素將與您在網站內容或頁腳或其他區域中設置為100像素寬的元素具有相同的尺寸頁。 像素是絕對值，因此無論文檔中元素出現在哪裡，100像素都是100像素。 不幸的是，儘管像素值很容易理解，但它們在響應式網站中效果不佳。
Ethan Marcotte提出了“響應式網頁設計”一詞，解釋了這種方法包含三個關鍵原則：
- 流體網格
- 流體介質
- 媒體查詢
流體網格和流體介質的前兩點是通過使用百分比而不是像素來確定尺寸值。
使用寬度值的百分比
當使用百分比為元素建立寬度時，元素顯示的實際大小將根據文檔在何處顯示而有所不同。 百分比是一個相對值，這意味著顯示的大小相對於文檔中的其他元素。
例如，如果將圖像的寬度設置為50％，這並不意味著圖像將以其正常尺寸的一半顯示。 這是一個普遍的誤解。
如果圖像本身寬度為600像素，那麼使用CSS值以50％顯示它並不意味著它將在Web瀏覽器中為300像素寬。 此百分比值是根據包含該圖像的元素計算的，而不是圖像本身的原始大小。 如果容器（可能是分區或其他HTML元素）的寬度為1000像素，則該圖像將顯示500像素，因為該值為容器寬度的50％。 如果包含元素的寬度為400像素，則該圖像將僅顯示200像素，因為該值為容器的50％。 這裡所討論的圖像具有50％的尺寸，完全取決於包含它的元素。
請記住，響應式設計是流暢的。 屏幕大小/設備更改時，佈局和大小會發生變化 。 如果你用物理的，非網絡的術語來思考這個問題，就像有一個紙箱，你正在填充包裝材料。 如果您認為箱子應該用這種材料填充一半，那麼您需要的包裝數量將根據箱子的大小而變化。 網頁設計中的百分比寬度也是如此。
基於其他百分比的百分比
在圖像/容器示例中，我使用包含元素的像素值來顯示響應圖像的顯示方式。 實際上，包含元素也將設置為百分比，並且該容器內的圖像或其他元素將根據百分比的百分比獲取其值。
這是另一個在實踐中顯示的例子。
假設你有一個網站，整個網站包含在一個“容器”類（一種常見的網頁設計實踐）的分部中。 在該部門內部還有三個部門，您最終可以將其顯示為3個垂直列。 該HTML可能如下所示：
現在，您可以使用CSS將該“容器”部門的大小設置為90％。 在這個例子中，容器除了沒有設置任何特定的值以外，沒有包含它的另一個元素。 默認情況下，主體將呈現為瀏覽器窗口的100％。 因此，“容器”部門的百分比將基於瀏覽器窗口的大小。 隨著瀏覽器窗口大小的變化，這個“容器”的大小也會變化。 因此，如果瀏覽器窗口寬度為2000像素，則此分區將顯示1800像素。 這是2000年的90％（2000 x .90 = 1800）），這是瀏覽器的大小。
如果在“容器”中找到的每個“col”分區都被設置為30％的大小，那麼在這個例子中它們中的每一個將是540個像素寬。 這被計算為容器呈現的1800個像素中的30％（1800×0.30 = 540）。 如果我們改變了容器的百分比，那麼這些內部分區的大小也會隨著渲染的大小而變化，因為它們依賴於包含元素。
我們假設瀏覽器窗口保持在2000像素寬，但我們將容器的百分比值更改為80％，而不是90％。 這意味著它現在將呈現1600像素寬度（2000 x .80 = 1600）。 即使我們不改變CSS的3個“col”分區的大小，並將它們保持在30％，它們現在的渲染方式也會不同，因為它們的包含元素（它們所依據的上下文）已發生變化。 現在這三個部門的渲染寬度將分別為480像素寬度，即1600的30％或容器的大小（1600 x .30 = 480）。
更進一步說，如果這些“col”分區中有一個圖像，並且該圖像使用了一個百分比，則其大小的上下文將是“col”本身。 隨著“col”分區的大小發生變化，其內部的圖像也會發生變化。 因此，如果瀏覽器或“容器”的大小發生變化，這會影響三個“col”分區，這反過來會改變“col”內部圖像的大小。正如您所看到的，這些都是連接的時候它涉及到百分比驅動的尺寸值。
當您考慮如何使用百分比值來顯示網頁中的元素時，您需要了解該元素駐留在網頁標記中的上下文。
綜上所述
百分比在為響應式網站創建佈局方面起著至關重要的作用。 無論是響應式地調整圖像大小，還是使用百分比寬度來製作尺寸相對於彼此的真正流動網格，理解這些計算對於實現您所期望的外觀都是必要的。