Question

我想知道是否有办法根据屏幕尺寸更改HTML内容的顺序。

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

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

基本上它看起来像这样：

H1 TEXT
H2 TEXT -----------------列表项目

（或查看http://www.jeroenduijker.nl/test/并调整屏幕大小）

媒体查询一进入（@media only screen and（max-width：480px）{}），h2被压扁了，我宁愿把导航栏放在h1上面。

是否有一种简单的方法可以使HTML变为：

-----------------列表项目
H1 TEXT
H2 TEXT

希望我已经解释得很好，我希望你能帮助我，我很感激！

Answer 1

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

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

根据屏幕大小更改HTML内容顺序

1 个答案: