如何通过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使页脚响应？

回答

相关问题