移动设计更改页脚

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; 
    } 
}