移動設計更改頁腳

Question

我有一個頁腳，有大約10個鏈接，當視口的大小爲320px或更少時，我想將該頁腳更改爲僅顯示兩個鏈接。我該怎麼做呢？有沒有人有任何好的參考資料（我不確定Google /如何）。

這是一種情況，我必須通過javascript創建DOM元素？

Answer 1

我會避免在這種情況下使用javascript。 css3具有內建的稱爲媒體查詢的功能，允許您檢查條件並僅在滿足這些條件時才應用某些樣式。它們被定義爲在這種情況下，如下

@media (max-width:320px){ 
    ... 
} 

媒體查詢條件檢查文檔「視」小於320像素寬，適用你把任何CSS媒體查詢標籤內（且僅供參考，你可以嵌套多個CSS一個媒體查詢中的樣式）

插入媒體查詢到您的樣式表，給那些移動隱藏鏈接類，並將它們設置如下顯示無：

@media (max-width:320px){ 
    .mobileHidden{ 
     display:none; 
    } 
} 

mozilla developer network has an article here on media queries如果您想一些進一步的讀。媒體查詢的使用通常被稱爲「響應式網頁設計」，並且應該可以在任何現代的Web瀏覽器上正常工作。

Answer 2

只需添加一個類你的鏈接，然後設置顯示：沒有對某些決議..

@media (min-width: 320px) { 
    .do-now-show-on-mobile { 
     display: none; 
     } 

Answer 3

如果他們每個人都有的鏈接單獨的類，只是媒體查詢瞄準他們，沒有必要javascript

<footer> 
    <a href="" class="link1">Link here</a> 
    <a href="" class="link2">Link here</a> 
    <a href="" class="link3">Link here</a> 
    ... 
    <a href="" class="link10">Link here</a> 
</footer> 

@media (max-width: 320px) { 
    .link1,.link2,.link3 { 
     display: none; 
    } 
}