如何通過CSS使頁腳響應？

我想通過CSS使頁腳響應。我已經通過background-size: cover嘗試過，但它不起作用。我如何使它響應？如何通過CSS使頁腳響應？

這裏的CSS代碼：

#super-footer { 

    width: 75%; position: relative; 
    background-color:#176ca5; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    padding: 10px 10px 10px 250px; 
    height:auto; min-height:200px; 
    margin:25px 0 10px 0; 
    float:left; 
    background-image:url('images/footer-bg.png'); 
    background-repeat:no-repeat; 
    background-position: 25px 30px; 
    -moz-box-shadow: 2px 3px 5px 1px #ccc; 
    -webkit-box-shadow: 2px 3px 5px 1px #ccc; 
    box-shadow:   2px 3px 5px 1px #ccc; 
    vertical-align:middle; 
}

這裏的鏈接網站：

http://demo.nextsyntax.com/goldcoast/

來源

2013-06-18 MOZ

當你說「有求必應」，你是什麼意思是什麼呢？它應該「迴應」什麼？世界末日？ – amn

而不是顯示「黃金海岸點」徽標作爲背景，如何將元素添加爲'＃super-footer'的子元素並設置圖像寬度的百分比？ – Stanley

'我想製作{background-image：url（'images/footer-bg.png'）; }根據瀏覽器窗口縮放。 - MOZ'也許如果你把標誌就像img並且將它漂浮到左邊，它會好嗎？或者你希望它被調整大小？然後，你可以添加新的div與寬度的百分比和徽標的背景。順便說一句，我認爲該網站是相當不錯的時候在正常的分辨率..但是當變小它有點奇怪的頭等。:( –

雖然你可以通過修改你的CSS的不同分辨率進行響應式設計。但是有一個可用的庫可以很好地實現響應式設計。

http://twitter.github.io/bootstrap/

它可以用來使您的網站響應屏幕分辨率。

來源

2013-06-18 07:31:02 abhinsit

是的謝謝！我會考慮它！ – MOZ

您應該使用@media查詢

例如

@media only screen and (max-device-width : 1024px) { 
#super-footer { 
width: 75%; 
position: relative; 
etc...} 
}

來源

2013-06-18 09:06:16 oboshto

謝謝！我會研究它，儘管我早些時候嘗試了媒體查詢並失敗了。 – MOZ

如何通過CSS使頁腳響應？

回答

相關問題