窗口较小或在移动设备上时响应标题 - 有创意

Question

我在一个网站上工作，但我不知道如何制作响应式标题。我制作了一个版本，我正在加载标头或移动标头，这是 2 个不同的组件，但我认为它完全没用。现在，我有下面的标题当窗口太小而无法显示所有这些和/或在移动设备上时，我希望有一个动态/响应行为。我想让图像从桌面开始：到（当屏幕、窗口较小以在一行中显示所有内容时，我可能还会使用媒体来更改一些？移动设备的 UI 字体大小）接着我有一种感觉，它应该这么难。我在https://codesandbox.io/s/dazzling-cache-q7t4g添加了一个 ling ，但它似乎不起作用。但是，如果方便的话，您可以只使用 3 个文本 Part1、Part2 和 Part 3 制作示例。其中 Part1 是徽标，Part2 是搜索，Part3 是菜单。在我的示例中很容易重用它。任何想法 ？问候

Answer 1

我已经为你写了一些 css 来解决响应问题，检查这里的代码，全屏查看然后调整你的浏览器大小，它不会在任何时候中断，

您需要做的就是使用媒体查询。

 @media (max-width: 991px) {

  .header-search-container {

    margin-right: auto;

  }

}

  @media (max-width: 650px) {

  .header-search-container {

    order: 1;

    margin-top: 20px;

    max-width: 100%;

  }

}

上面的 CSS 只是您使用媒体查询的示例，可以根据需要更改任何内容。