Question

这不像我预期的那样有效。我正在桌面浏览器（Chrome，Windows 7）中进行测试。浏览器窗口的最大宽度是800px。

当浏览器窗口宽度小于1000px时，我该怎么做才能更改？

<html>
  <head>
    <title></title>
    <style type="text/css">
      .flex-container {
          max-width: 800px;
          height: 180px;
          border: red 2px solid;
      }
      @media (max-device-width: 1000px) {
          .flex-container {
              max-width: 400px;
          }
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
    </div>
  </body>
</html>

Answer 1

使用max-width，而不是max-device-width，除非您只希望它影响某些小型手机以及屏幕小于100px的小型手机

@media (max-width: 1000px) {
    .flex-container {
        max-width: 400px;
    }
}

Demo

有关更多信息和媒体功能的完整列表（媒体查询括号中的内容），check out the Mozilla page

Answer 2

如果使用max-device-width，您将永远不会在桌面上看到更改。在开发过程中，使用max-width并将其交付给客户，将智能手机的mediaQueries更改为max-device-width。我建议将平板电脑mediaQueries保留为max-width，因为您可以使用较小的屏幕来定位某些桌面用户。

为什么@media查询不起作用？

2 个答案: