如何在手机上放大页脚？

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) {

}

对于手机，您需要放大身高。