创建响应式导航，该导航在移动设备上向右对齐，但在大屏幕上捕捉到中心

Question

我正在尝试创建带有徽标和链接的nav。我希望徽标始终保持在同一位置，垂直居中于左侧，但我希望链接项目根据屏幕尺寸而改变。

1. 在小屏幕上，我希望字体较小，并且链接右对齐 2.在中等尺寸的屏幕上，我希望字体大小适中，链接居中对齐
2. 在大屏幕上，我希望字体更大，链接居中对齐

理想情况下，我希望每当文字正要打到徽标时就进行更改。

Here's a link到我正在拍摄的照片。

Answer 1

您需要的是断点-当视口大小更改时，它会更改CSS样式。语法如下：

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

您可以在这里阅读有关内容：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

您可以使用媒体查询根据屏幕尺寸调整字体大小和位置。例如@media (max-width 600px) { [your nav name] a { font-size: .7rem; float: right; }}。相应地针对不同的屏幕进行调整。