Question

我想通过CSS做出页脚响应。我已经通过background-size: cover尝试了它，但它没有用。我怎样才能使其响应？

这是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/

Answer 1

虽然您可以通过修改不同分辨率的CSS来进行响应式设计。但是有一个库可用于实现响应式设计。

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

它可用于使您的网站响应屏幕分辨率。

Answer 2

您应该使用@media次查询

例如

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

Answer 3

使用类似

<footer class="responsive-footer">

            <div class="footer-left">

                <p class="footer-links">
                    <a href="#">Home</a>
                    |
                    <a href="#">Blog</a>

                </p>
            </div>

            <div class="footer-center">
                <div>
                    <i class="fa fa-map-marker"></i>
                      <p><span>Address</p>
                </div>

                <div>
                    <i class="fa fa-phone"></i>
                    <p>+00 00-0000000</p>
                </div>
                <div>
                    <i class="fa fa-envelope"></i>
                    <p><a href="mailto:support@support.com">support@support.com</a></p>
                </div>
            </div>
            <div class="footer-right">

                <div class="footer-icons">
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                </div>
            </div>
        </footer>

@media (max-width: 880px) {

    .responsive-footer .footer-left,
    .responsive-footer .footer-center,
    .responsive-footer .footer-right{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }

    .responsive-footer .footer-center i{
        margin-left: 0;
    }
 ``

如何通过CSS使页脚响应？

3 个答案: