移动设计更改页脚答案

【问题标题】：Mobile Design Change Footer移动设计更改页脚
【发布时间】：2013-05-21 07:01:26
【问题描述】：

我有一个包含大约 10 个链接的页脚，当视口为 320 像素或更少时，我想将该页脚更改为仅显示两个链接。我该怎么做呢？有没有人有任何好的参考资料（我不确定谷歌的方式/内容）。

这是我必须通过 javascript 创建 dom 元素的情况吗？

【问题讨论】：

标签： css mobile responsive-design web-frontend

【解决方案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 如果您想进一步阅读。媒体查询的使用通常被称为“响应式网页设计”，应该可以在任何现代网络浏览器上正常工作。

【讨论】：

感谢您的链接，它真的很有帮助。

【解决方案2】：

如果它们在链接上都有单独的类，只需使用媒体查询来定位它们，不需要 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;
   }
}

【讨论】：

【解决方案3】：

只需在链接中添加一个类，然后在某些分辨率下设置 display:none..

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

【讨论】：