Question

我有一个使用自适应CSS的网站。根据响应状态，我想更改菜单：

该网站显示在宽屏幕上，因此我有两列设计。在这种模式下，我可以利用屏幕的完整高度，因此我可以在标题下面列出类别和标签，这需要相当大的空间。
该网站显示在较宽的屏幕上，该网站将所有内容堆叠成一列。在这种模式下，我想在菜单中添加类别和标签概述的链接，而不是保留较长的标签和类别列表。

我最近的方法是使用两个CSS类，水平和垂直：

@media (min-width: 801px) {
  .vertical { display: none; }
}
@media (max-width: 800px) {
  .horizontal { display: none; }
}

这些类用于装饰类别和标签概述的两个菜单项以及菜单下方的类别和标签列表。

[编辑] ：为了简化代码，我只把类别，标签等同起来。我担心我误会了一些读者（对不起！），所以我添加了更多代码来清楚地显示两个选项之间的区别。

<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1">
  ...
</head>
...
<aside>
  <nav class="nav">
    <ul class="list-bare">
      {% for title, link in MENUITEMS %}
        <li><a class="nav__link" href="{{ link }}">{{ title }}</a></li>
      {% endfor %}
      <li class="vertical"><a class="nav__link" href="/categories.html">Categories</a></li>
    </ul>
  </nav>
  <h2 class="horizontal">Categories</h2>
  <ul class="navbar horizontal">
    {% for cat, null in categories %}
      <li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
    {% endfor %}
  </ul>
</aside>

这实际上有效。但我想知道这是否是CSS艺术的状态。还是有其他机制来做那些交替的事情吗？

Answer 1

如果我正确理解了您的帖子，您正在考虑复制您的菜单并隐藏一个版本或另一个版本，具体取决于视口或屏幕宽度。

虽然这可行，但有一个更易于维护的更清洁的解决方案。

请查看此建议：https://codepen.io/panchroma/pen/eMKGKw

正如您将看到的只有一个菜单，我正在通过简单的媒体查询来操纵菜单列表项的宽度。

HTML

<ul>  
  <li><a class="nav__link" href="/categories.html">Categories</a></li>
  <li><a class="nav__link" href="/tags.html">Tags</a></li>
</ul>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
    width:100%;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

@media (min-width: 801px) {

  li {
    width:50%;
  }
}

加上文档

中的viewport meta tag

<head>  
...  
<meta name="viewport" content="width=device-width, initial-scale=1">  
...  
</head>

<强>更新

以下是我认为可以完成您需要做的变化： https://codepen.io/panchroma/pen/VXGPEM

代码非常相似，标签云和类别列表的嵌套列表以及管理其显示的一些媒体查询：

祝你好运！

根据响应状态

1 个答案: