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

Question

我正在创建一个响应式网页，旨在在不同的屏幕尺寸上显示。我包括 @Media（Min Width：768px），但看来我的页面无法正确地解释窗口/屏幕大小。我尝试在Chrome中测试我的网页，在此启用调试模式，我可以在Pixels中看到窗口大小。但是在控制台中运行 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;
  }
}