如何確保網站適合所有屏幕分辨率？

剛剛花了幾個小時寫了一個新的網站...在我的分辨率，1366x768 ...看起來不錯...但是，即使下降到1024x768意味着不是所有的東西都適合屏幕寬度！如何確保網站適合所有屏幕分辨率？

嘗試：

<style type='text/css'> 
    body {width:100%;} 
</style>

這確實對我的決心一定的效果，但對較小的分辨率沒有影響...... 如何確保我的網頁將在所有的屏幕分辨率適合100％？

來源

2010-07-20 David

我使用CSS @media指令，不幸的是，IE8不支持。兼容CSS3讓你的風格不同，根據視口的寬度：

<style type="text/css"> 
@media screen and (min-width:1px) and (max-width:1365px) { 
    ... 
} 
@media screen and (min-width:1366px) { 
    ... 
} 
</style>

順便說一句，你有你的CSS錯誤，你忘了指定單位：

body {width:100%;}

來源

2010-07-20 16:28:43

除非你想以百分比進行所有尺寸測量，否則我認爲你不能。即使如此，如果有人使用不同寬高比或分辨率非常低的分辨率，則會出現問題，因爲在第一種情況下，您的頁面會被拉伸或擠壓，而在第二種情況下，您可能會遇到佈局問題。

來源

2010-07-20 16:26:42 JAB

沒錯。幾乎不可能確保一個網站適合「所有屏幕分辨率」;您應該專注於使您的網站適合最流行的解決方案（位於目標人羣中），並且可以在儘可能廣泛的解決方案中使用。 – 2010-07-20 16:36:47

您可能感興趣的一件事是CSS Media Queries。它們在每個瀏覽器中都不受支持，例如IE僅在版本9預覽時支持它，但它們可以幫助調整窗口大小以及較小的分辨率，因爲您可以對每個屏幕大小應用不同的CSS規則。

除此之外，請確保您的佈局不是「硬性」的，即不要將表格視爲div。根據父級的百分比製作寬度，或者使用浮動來使它們正確排列。您網站的「最小寬度」（通常爲800或1024）是可以接受的，因爲古代分辨率（如640x480）的用戶只需滾動即可。

您可能需要返回到您的CSS繪圖板，並設計它來重新調整自己，和/或有一個最小寬度。

來源

2010-07-20 16:27:32 Paul

+1 [SimpleBits]（http://simplebits.com/）只是使用媒體查詢重新設計的。如果你想看到這種方法的潛力，那麼在24英寸的顯示器上，從全屏開始，將其拖到100px寬，這讓我流口水！ – kingjeffrey 2010-07-20 17:14:24

這裏是關於[媒體查詢]（http ：//www.alistapart.com/articles/responsive-web-design/）A List Apart。 – kingjeffrey 2010-07-20 17:15:27

您的身體標記的CSS看起來OK。但是如果例如你身體中的所有DIV都有固定的大小，它們將永遠不會填滿整個寬度。你可以發佈你的網頁的例子嗎？

來源

2010-07-20 16:27:42 2ndkauboy

人們往往使網站960px寬。

很容易拆分成大小可調的列，因爲它可以被3,4,5,6,8,10,12,15和16整除，再加上它可以很好地適用於最小（值得）的分辨率1,024像素。

您當然可以使用流體佈局或各種檢測屏幕分辨率的方法，但是如果您使用大量圖像，則會使其成爲皮塔餅。

來源

2010-07-20 16:29:24 theorise

我建議你使用CSS框架。他們爲您的設計打下基礎，因此您不必擔心這樣的事情。

我個人最喜歡的是Blueprint，因爲他們照顧的東西，如印刷術和格式不僅是網格佈局，這就是你所追求的。

960gs是另一種流行的作品，其工作方式與Blueprint非常相似。他們還有一些工具可以幫助您定製開發，而不像Blueprint那樣受到限制。

他們是我以前用過的兩個，但我確定有更多的負載。

來源

2010-07-20 16:37:15

爲最常見的分辨率製作佈局樣式表...比方說800x600,1024x767和1280x1024。然後加載它們：

<link rel='stylesheet' media='screen and (min-width: 778px)' href='css800width.css' />

您可以在CSS-Tricks閱讀更多內容。

來源

2010-07-20 16:57:13

如何確保網站適合所有屏幕分辨率？

回答

相關問題