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

Question

我正在创建一个响应性网页，旨在在不同的屏幕尺寸上显示。我加入了 @media（最小宽度：768像素），但看来我的页面无法以某种方式正确解释窗口/屏幕尺寸。我尝试在Chrome中测试我的网页，启用调试模式后，我可以在右上角看到窗口大小（以像素为单位）。但是在控制台中运行 window.innerWidth 会返回不同的值。它为所有其他网站返回正确的值。 任何提示可能有什么问题吗？

Answer 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;
  }
}