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

Question

在学习媒体查询时，我经常发现两种不同的调用方式：

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

和

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

我发现的大多数信息都在 'min-device-width' 上，因为 "correct" 是 "correct"，但是当我试图在我的代码中实现它时，'min-device-width' 不起作用并且'min-width' 做到了。在演示中两者都有效，但理论上我似乎需要一个或另一个。

这是为什么，正确的做法是什么？

Answer 1

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

min-device-width指设备的宽度

min-width 是指浏览器的宽度 window（包括滚动条！）因此可能小于 min-device-width，因为浏览器不一定覆盖全屏

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

Correct way to formulate media queries?