1

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

是否建议将两者之一作为最佳实践，为什么？

4

2 回答 2

2

在移动与桌面设计方面，移动优先可以帮助您真正首先考虑什么是重要的，当然也就是内容。你现在不是把东西拿走，而是在向上设计建筑。

min-width和max-width媒体查询以您所说的方式使用，原因很明显，当您考虑它时。min-width首先对移动设备有好处，因为您要添加元素，并且要首先使用移动设备执行此操作，您必须指定哪些元素仅在更大的屏幕上显示 -min-width指定更大的屏幕，等等。

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

于 2013-07-09T14:30:30.730 回答
0

您可以在您的媒体查询中使用这两者。然后任何落在 min 和 max 范围内的设备都将使用以下 css。您可以根据需要设置任意数量的媒体查询。

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

对于上面的示例，任何具有该类的项目.hidden-desktop都将在这些设备上隐藏。这是您只想在低分辨率设备上看到的功能。

我个人使用单个最小或最大宽度的范围。那里有很多不同的移动设备，我认为设计将决定您需要设置多少个断点。我通常最终得到 2 - 4。1 用于手持设备，1 用于平板电脑，1 用于台式机。根据设计，我有时会添加对 27 英寸等大型显示器的查询。监视器等...

于 2013-07-09T14:35:06.730 回答