根据屏幕尺寸改变HTML内容顺序

Question

根据屏幕尺寸改变HTML内容顺序

6

我想知道是否有一种方法可以根据屏幕大小更改HTML内容的顺序。

这是主要的网站标题，它在每个媒体查询上都显示正确。

<h1>title</h1>
<nav>inline list items</nav>
<h2>subtitle</h2>

基本上它看起来像这样:

H1文本 H2文本-----------------列表项

(或者查看http://www.jeroenduijker.nl/test/并调整屏幕大小)

一旦媒体查询步入(@media only screen and (max-width: 480px) {}), h2就会被压缩，我更喜欢将导航栏放在h1上面。

有没有一种简单的方法使html变为：

-----------------列表项 H1文本 H2文本

希望我已经解释得足够清楚了，希望你能帮助我，谢谢！

- Redavac

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aaronmallen · Accepted Answer

您可以编写两个导航栏，其中一个隐藏，另一个可见，然后根据媒体查询切换它们。

HTML:

<nav class="show-mobile">
      ...
</nav>

<h1>title</h1>
<nav class="hide-mobile">
      ...
</nav>
<h2>subtitle</h2>

CSS：

@media only screen and (max-device-width: 480px) {
      .show-mobile {
        display: block;
      }
      .hide-mobile {
        display: none;
      }
    }

 @media only screen and (min-device-width: 481px) {
      .show-mobile {
        display: none;
      }
      .hide-mobile {
        display: block;
      }
    }

或者在导航菜单前后各加一个H1元素，并根据媒体查询切换它们的可见性。

<h1 class="hide-mobile"></h1>
<nav>
  ...
  ...
</nav>
<h1 class="show-mobile">Title</h1>
<h2>subtitle</h2>

或者你可以在移动媒体查询被激活时，告诉导航在顶部具有绝对定位。

@media only screen and (max-device-width: 480px) {
  nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px
  }
}