由于网页对窗口大小的解释不正确，媒体查询失败

Posted 2023-03-05

【中文标题】由于网页对窗口大小的解释不正确，媒体查询失败

【英文标题】：media query failing due to incorrect window size interpretation by webpage

【发布时间】：2019-07-10 21:23:13

【问题描述】：

我正在创建一个响应式网页，旨在显示在不同的屏幕尺寸上。我包含了一个 @media (min-width: 768px)，但我的页面似乎无法正确解释窗口/屏幕大小。我尝试在 Chrome 中测试我的网页，在启用调试模式的情况下，我可以看到右上角的窗口大小（以像素为单位）。但是在控制台中运行 window.innerWidth 会返回不同的值。它为所有其他网站返回正确的值。 有什么提示可能是错的吗？

【问题讨论】：

请附上minimal reproducible example。 任何事情都可能出错。

【参考方案1】：

您的媒体查询中存在语法错误。你必须写

@media only screen and (min-width: 768px) 

或者你可以写

@media screen and (min-width: 768px)

如果您需要了解媒体查询的工作原理，这里有一个小演示：

如果浏览器窗口为 600px 或更小，则此 css 中的背景颜色将为浅蓝色：

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

【讨论】：

媒体查询的媒体类型部分是可选的，默认为all OP给出的内容没有语法错误。

同意，但最好写媒体类型部分来澄清事情，你不觉得吗？

不。首先，only screen 和 screen 都不会与使用的隐式 all OP 一样。然后，如果不需要特异性，请不要包括它。当您设置border: 1px solid 时，您不会明确声明所有四个border-top、border-right、border-bottom 和border-left 中的所有3 个-color、-width、-style。而且，这显然不是 OP 的问题。