修复响应式设计

Question

我编写了以下代码以在大屏幕 (>800px) 上以特定方式显示页脚项目。它在大屏幕上工作正常，但现在此设置也适用于较小的屏幕（< 800px 屏幕）。我只想将此 flex 设置应用于大屏幕...我在这里做错了什么？

@media (min-width: 800px) {
   :root {
    font-size: 30px;
  }
  footer .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}

@media (max-width: 599px) {
   :root {
    font-size: 14px;
  }
}

@media (min-width: 600px) and (max-width: 799px) {
   :root {
    font-size: 17px;
  }
}

Answer 1

检查您是否在 <head> 中添加了元标记：

这很重要。因为没有视口标签，媒体查询根本不起作用。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

如果您在 @media (min-width: 800px) 中应用的设置适用于较小的屏幕尺寸，这意味着您在查询之外也编写了相同的代码。您应该在 CSS 文件中检查它。也许您在某个地方的查询下面写了相同的代码。

因此请检查此代码是否在 media query 之外使用，如果它在 media query 之外使用，请检查其顺序低于 @media 800px 然后你需要删除它，代码就可以正常工作了。

此外，我希望能有更多 CSS 和 HTML 与

合作

这是您应该检查的代码，它是否写在您的查询之外。

footer .container {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
          }

如果这不起作用，请向我们提供更多 HTML 和 CSS，因为这可能是 CSS 特异性问题。

修复响应式设计

Fixing Responsive Design

html

css

responsive-design