html - 创建在移动设备上向右对齐但在大屏幕上对齐中心的响应式导航

Question

我正在尝试创建一个带有 Logo 和链接的 nav。我希望 Logo 始终保持在同一位置，在左侧垂直居中，但我希望链接项根据屏幕大小而变化。

1. 在小屏幕上，我想要一个小字体，链接右对齐 2.在中等屏幕上，我想要中等大小的字体，链接居中对齐
2. 在大屏幕上，我想要更大的字体，链接居中对齐

理想情况下，我希望只要文本刚好碰到 Logo 就会发生更改。

Here's a link与我想象的一样。

Answer 1

您需要的是所谓的断点 - 它会在视口(viewport)大小更改时更改 CSS 样式。语法如下所示:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

您可以在这里阅读:https://www.w3schools.com/css/css_rwd_mediaqueries.asp