在媒体查询中使用min与max-width有什么实际区别吗？

Question

我已经读过，最小宽度的媒体查询意味着您正在设计从移动设备，以及从桌面向下的最大宽度媒体查询。但是，如果您牢记良好的设计实践，min-width和max-width媒体查询的结果是否基本相同？

推荐的两个中的一个是最佳实践，为什么？

Answer 1

在移动与桌面设计方面，移动设备首先帮助您真正考虑首先重要的内容，当然这也是内容。你现在正在设计建筑物，而不是把东西带走。

当您考虑它时，

min-width和max-width媒体查询以您说的方式使用，原因很明显。 min-width首先适用于移动设备，因为您正在添加元素，并且首先使用移动设备执行此操作首先您必须指定哪些元素仅在更大的屏幕上显示 - min-width指定更大的屏幕， et voila。

所以，在回答你的问题时，这取决于你。如果你同意，就像大多数人一样，移动优先是目前最好的设计原则，那么min-width是您应该做出的选择，因此您可以将内容添加到下一个屏幕尺寸。反之亦然。如果你认为两者都不是最好的方式，那么这个世界就是你的牡蛎。

Answer 2

您可以在媒体查询中同时使用它们。然后，落在最小值和最大值范围内的任何设备将使用以下css。您可以根据需要设置任意数量的媒体查询。

@media (min-width: 768px) and (max-width: 979px) {
  .hidden-desktop {
    display: none;
  }
}

对于上面的示例，任何具有类.hidden-desktop的项目都将隐藏在这些设备上。这是我的一项功能，您只希望在较低分辨率的设备上可见。

我个人使用超过一分钟或最大宽度的范围。有很多不同的移动设备，我认为设计将决定你需要设置多少个断点。我的手持设备通常为2 - 4. 1，平板电脑为1，台式机为1。根据设计，我有时会为27in等大型显示添加查询。监视器等...