如何製作一個適合所有屏幕分辨率的網頁

Question

我正在嘗試創建一個適合所有屏幕尺寸（或分辨率）寬度的網頁。

換句話說，我想以這樣的方式格式化頁面的寬度，使得任何查看它的人都不必在屏幕底部使用水平滾動條。

到目前爲止，我在這個主題上找不到任何幫助。

Answer 1

你問這個問題的方式，不僅是身體的寬度必須是100％，而且其子元素的寬度也必須以百分比表示。

Answer 2

實現可伸縮網頁的唯一方法是避免固定大小。當然，這會給文本帶來問題，因爲它會嘗試將其包裝在下面的行中，因此您必須指定最小寬度或將其與帶有溢出的前置標記組合：隱藏，以便它不會影響頁面佈局僅僅無法閱讀文本的費用。

幸運的是，您可以通過簡單地將您的網頁瀏覽器縮小到較小的分辨率並查看它如何平移來輕鬆測試您的頁面。

Answer 3

好吧，有幾種方法。一種方法是使用ems /百分比來表示寬度，從而實現流暢的設計，以適應用戶的屏幕分辨率。另一個是有幾張不同寬度的css表格，並根據來自簡單js代碼的屏幕分辨率檢查調用它們。

第一個是有點困難，但產生良好的穩定結果。另一方面，（作爲一名設計師）它有點會限制你的創造力。

在我看來，後者更爲廣泛的應用。如今，3種不同的樣式表可滿足全球大多數設備的需求。一個大約900px將覆蓋一些較老的屏幕，一個大約1160px將處理更大和更現代的屏幕，並且一個用於移動設備（對不起，不知道近似寬度）應該做到這一點。