如何設計獨立於分辨率的CSS元素？

我是網絡開發新手。我的系統中有1280 * 800的分辨率。當我設計CSS元素時，我必須給出像素的位置間隔。如果我爲我的分辨率設計，同樣的頁面可能會在小型的高級看起來很大。如何設計獨立於分辨率的CSS元素？

我如何設計與分辨率無關的CSS元素

2009-10-17 Anand

要做的第一件事就是選擇網站支持的最低分辨率而不用水平滾動。作爲指導參考W3 Schools;他們目前在1024x768或更高的瀏覽器中報告了至少93％的瀏覽器，因此這是一個很好的開始。

接下來就是決定固定寬度還是可變寬度。例如，是否所有機器都應該以與上面定義的最小分辨率兼容的相同固定寬度渲染站點，或者是否應將元素橫向放置在整個可用空間中。固定寬度選項更具可預測性，但可變寬度可更好地利用屏幕空間。

最後，儘量避免顯式寬度或左/右定位沿着可變寬度路徑走。對於某些頁面元素（例如總是以相同寬度呈現的導航列），這是很好的，但其他元素（如主頁面內容）需要擴展超出任何顯式邊界。最好的選擇是定義父容器的寬度（它可能只是100％，這是div元素的默認值），然後允許子元素填充容器並讓瀏覽器相應地顯示寬度。

來源

2009-10-17 06:02:47

非常感謝，我會盡你所說。 – Anand 2009-10-17 06:09:57

請不要使用W3Schools作爲網站統計的參考，他們的觀衆是技術上的頭腦，而不是一般網絡人口的典型。 – roryf 2009-10-18 04:29:51

隨意提供一個替代網站羅裏。 – 2009-10-18 08:23:48

首先，你可以在可能使用的測量（百分比，EM等）相對單位。其次，另一種常見技術是針對不同的分辨率（或者至少寬度，這往往是重要的事情）使用不同的樣式表。

定義最小寬度然後修改寬度是很常見的。 960像素現在相當普遍。

來源

2009-10-17 05:33:06 cletus

Web開發人員爲所有分辨率設置相同的外觀和感覺所使用的常見寬度和高度是多少？ – Anand 2009-10-17 05:48:31

+1列表「em」:) – Mahdi 2012-12-30 14:34:42

從一些關於液體（彈性）佈局和網格佈局的文章開始（您可以在任何引擎上搜索這些術語）。這些文章的一個很好的來源是Layout Design section on A List Apart。特別是Fluid Grids，其中有很多信息和大量的關於最新設計技術資源的鏈接，其中包括一些最流行的用於網格佈局設計的CSS框架。 How To Size Text In CSS人有很多信息如何從絕對像素和使用em和百分比。 Multi-Column Layouts Climb Out Of The Box也有一些關於液體佈局和一些不錯鏈接的有趣信息。

來源

2009-10-17 06:14:38

如何設計獨立於分辨率的CSS元素？

回答

相關問題