css - 移动设计更改页脚

Question

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

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

Answer 1

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

Answer 2

我会避免在这种情况下使用 javascript。css3 具有内置称为媒体查询的功能，允许您检查条件并仅在满足这些条件时应用某些样式。它们定义如下

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

在这种情况下，媒体查询条件检查文档“视口”宽度小于 320 像素，并将应用您在媒体查询标签中放置的任何 css（仅供参考，您可以在一个媒体查询中嵌套多个 css 样式）

在您的样式表中插入一个媒体查询，给这些移动隐藏链接一个类，并将它们设置为不显示，如下所示：

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

如果您想进一步阅读，Mozilla 开发者网络在这里有一篇关于媒体查询的文章。媒体查询的使用通常被称为“响应式网页设计”，应该可以在任何现代网络浏览器上正常工作。

Answer 3

只需在您的链接中添加一个类，然后在某些分辨率上设置一个显示：无..

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