如何仅在移动设备上放大页脚？答案

【问题标题】：How to enlarge footer on mobile only?如何仅在移动设备上放大页脚？
【发布时间】：2015-06-07 05:18:11
【问题描述】：

我的页面底部有一个页脚。它具有以下 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 不是很熟悉，但我听说有一种方法可以在不同尺寸的设备上应用不同的样式。有人给我提示吗？

【问题讨论】：

标签： html css twitter-bootstrap footer

【解决方案1】：

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

例子：

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

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

Here 是一个很好的参考解决方案列表。

More about Media Queries

【讨论】：

正是我想要的:)

【解决方案2】：

看看CSS media queries

【讨论】：

【解决方案3】：

试试这个，

 #footer {
height:auto;
}

【讨论】：

【解决方案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) {

}

对于移动设备，您需要放大高度。

【讨论】：