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

Question

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

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

理想情况下，我希望在文本即将击中徽标时发生更改。

这是我所描绘的链接。

标签： htmlcss

Answer 1

你需要的东西叫做断点——当视口大小改变时它会改变 CSS 样式。语法如下所示：

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

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