响应式 CSS Div 宽度

Question

在CSS中，我定义了3个断点360px、660px、800px。页面上有多个<div>标签，其中只有文本链接。1<div>块有 1 <a>。

对于 360px 断点，我将为每个 100% 宽度<div>。但对于其他 2 个断点，我希望具有正常宽度<div>（基于文本长度的正常宽度）。如何针对 660px 和 800px 断点实现此目的，因为这些断点也达到 100% 宽度。我希望这两个采用自然宽度。

Answer 1

<div>是一个块级元素，这意味着默认情况下它始终占据其容器宽度的 100%。因此，您可以只提及 1 个断点（例如 800px），而不是您提到的 3 个断点，并将<div>'s设置width为max-content

@media (max-width:800px) {
  div {
    width: max-content;
  }
}