如何只在手機上放大頁腳？

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

} 

對於移動需要放大的高度。