Html 在媒体查询中使用最小宽度和最大宽度有实际区别吗？

我已经读到，最小宽度的媒体查询意味着你是从手机开始设计的，而最大宽度的媒体查询则是从桌面开始设计的。但是，如果您牢记良好的设计实践，

minwidth

和

maxwidth

媒体查询的结果是否基本上不一样

---

两种方法中的一种被推荐为最佳实践，为什么？

在移动与桌面设计方面，mobile first帮助您真正思考什么是最重要的，当然是内容。你现在正在向上设计建筑，而不是把东西拿走

minwidth

和

maxwidth

媒体查询的使用方式与您所说的相同，当您仔细思考时，有一个非常明显的原因

min width

适用于mobile first，因为您正在添加元素，要使用mobile first执行此操作，您必须指定哪些元素仅显示在更大的屏幕上-

min width

指定更大的屏幕，等等

---

所以，作为对你问题的回答，这要视情况而定。如果你像大多数人一样，同意“手机优先”是目前最好的设计原则，那么你应该选择

minwidth

，这样你就可以将内容添加到下一个屏幕大小。反之亦然。如果你认为两者都不是最好的方法，那么世界就是你的牡蛎。

你可以在媒体查询中使用这两种方法。然后，在最小值和最大值范围内的任何设备都将使用以下css。您可以根据需要设置任意数量的媒体查询

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

对于上面的示例，类为

.hidden desktop

的任何项目都将隐藏在这些设备上。这可能是您只希望在低分辨率设备上可见的功能

我个人使用单个最小或最大宽度的范围。有这么多不同的移动设备在那里，我认为设计将决定你需要设置多少断点。我通常以2-4结束。1个用于手持设备，1个用于平板电脑，1个用于台式机。根据设计的不同，我有时会为27英寸这样的大屏幕添加查询。监视器等