如何仅在手机上放大页脚？

Question

我的页面底部有一个页脚。它有以下 HTML 和 CSS:

<style>
    html {
        position: relative;
        min-height: 100%;
    }
    body {
        /* Margin bottom by footer height */
        margin-bottom: 60px;
    }

    #footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        height: 60px;
        background-color: #e7e7e7;
    }
</style>

<div id="footer">
    <div class="container col-md-3 text-center">
        <p class="text-muted">© 2015, LuMa</p>
    </div>
    <div class="container col-md-6"></div>
    <div class="container col-md-3 text-center">
        <p><a href="/terms">Terms</a> & <a href="/privacy">Privacy</a></p>
    </div>
</div>

这在桌面上看起来不错：

但在移动设备上有一个换行符：

没关系，但如何在移动设备上放大页脚？我对 CSS 不是很熟悉，但听说有一种方法可以在不同大小的设备上应用不同的样式。有人给我提示吗？

Answer 1

在 CSS 末尾使用媒体查询以在检测到特定分辨率时定位 footer。

示例：

@media screen and (max-width: 480px) {
    #footer {
        height: 100px;
    }
}

当从屏幕上检测到 480px 的最大宽度时，这将覆盖页脚的高度。

Here 是一个很好的决议参考列表。

More about Media Queries

Answer 2

看看CSS media queries

Answer 3

试试这个，

 #footer {
height:auto;
}

Answer 4

试试这个

/*@1 14em
mobile
*/
@media only screen and (min-width: 14em) {

}
@media only screen and (min-width: 27em) {

}
/*
Laptops
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 40em) {
}
/*@2 38em
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 51em){

}

/* @3 51em
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {

}

移动端需要加大高度。

如何仅在手机上放大页脚？

How to enlarge footer on mobile only?

html

css

footer

twitter-bootstrap