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

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