制定媒体查询的正确方法？

Question

在了解媒体查询时，我经常会找到两种不同的方式来调用它们：

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

和

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

我发现的大部分信息都是'min-device-width'是“正确的”，但是当我试图在我的代码中实现它时，'min-device-width'不起作用， 'min-width'确实如此。在演示中都有效，但从理论上讲，我似乎需要一个或另一个。

为什么会这样，以及正确的方法是什么？

Answer 1

两者都是有效的媒体查询，但结果不同：

min-device-width指的是设备的宽度

min-width指的是浏览器窗口的宽度（包括滚动条！），因此可能小于min-device-width，因为浏览器不一定涵盖整个屏幕

编辑：还有更多媒体查询（例如width的确切宽度），但min-width和max-width可能是响应式设计中最重要的查询。