自適應網頁設計背景圖片

Question

我發現StackOverflow上十分感謝提前任何幫助是非常有用的。

在http://test2.heyscout.com/，我不知道如何正確設置我的背景圖像在我的「英雄格」爲響應網頁設計。我一直在玩很多設置，但我喜歡它：

• 保持位置始終如一，沒有由於瀏覽器大小跳躍（例如，在手機上，它得到錯位或有空白區域這裏不應該有）
• 「驗證任何脫機」雖然我在EM設置不調整，甚至正常
• 按鈕看起來怪怪的移動設備

什麼是最好的實踐爲了保持「英雄格」？我猜測它必須用最小高度做一些事情，或者修正實際圖像的尺寸。我應該以百分比而不是像素來設置英雄div的高度嗎？

關於如何保持我的「三個月div」一致填充頁面底部1/3的任何建議將會很好 - 我會想象當瀏覽器的高度比預期的大，它會看起來奇怪。我已經讀過，最好只爲RWD保留高度屬性，但我想知道是否有任何技巧可以確保它正確調整大小。

Answer 1

你有沒有看着媒體查詢？基本上，它們允許您根據瀏覽器寬度（和高度）設置特定的CSS。這將允許您控制頁面在特定瀏覽器大小時的顯示方式。

實例 - CSS在不同寬度：

@media screen and (max-width: 600px) { 
    /* add some CSS here for 600px maximum width*/ 
} 

@media screen and (max-width: 960px) { 
    /* add some CSS here for 960px maximum width*/ 
} 

Answer 2

爲了讓背景圖片總是充滿DIV，使用background-size: cover²，除非你需要支持IE8。

如果您的字體大小不正確的跨PC /平板電腦/掌上看，嘗試使用media queries設置字體大小具體決議。

我不知道如何幫助你和你的按鈕「找怪」，除了提供豐富的同情。

在未來，儘量保持你的問題更集中。 :)

Answer 3

給

background-size:contain; 

，這可能會解決您的問題，通過包含因爲它會自動調整大小！