媒体查询和屏幕方向答案

【问题标题】：Media queries and screen orientation媒体查询和屏幕方向
【发布时间】：2020-02-15 17:34:40
【问题描述】：

我正在创建一个响应式设计网页，并且我想确保针对不同的设备和方向正确执行所有媒体查询。

这篇文章建议尝试使用 min-width 和 min-height 媒体查询。并为不同的分辨率设置不同的断点。

虽然，我发现这个方法有方向（见下文）。我应该使用这种方法还是上面的方法？我应该使用@media screen，还是应该考虑 all vs screen？

    @media screen and (min-width: 700px) and (orientation: landscape) { ... }

【问题讨论】：

FWIW，默认为@media () {} 并仅在需要时应用screen、print 等，我没有遇到重大问题。使用orientation: landscape 将取决于您的站点的要求。我只会使用orientation 作为对现有媒体查询的改进。我可以用我中奖的次数来计算我必须使用orientation 的次数。请注意，当设备为701px 或更高版本并且在portrait 中时，您上面的内容不会应用任何样式。

【解决方案1】：

屏幕方向是一个有趣的方向，因为它并不总是由设备/浏览器报告回来，因此使用它不如 min-width/max-width 可靠。

另一件事是，除非您在设备处于横向状态时尝试做一件特别时髦的事情，否则只需根据宽度断点调整您的设计通常就足以获得您想要的效果。

如果您有一个横向设备，那么让设计显示与纵向显示相同的水平空间可能是可以的。也就是说，这不会是用户的意外行为。

对于媒体all 与screen，我通常只使用屏幕，因为如果用户想要执行诸如打印页面之类的操作，我不一定希望我的断点干扰它。

尽管如此，您应该考虑用户最常见的用例，并以此为基础做出决定。如果它只是一个普通的 web 应用程序/页面，那么只使用 screen 而不必担心 orientation 就没有任何问题。

【讨论】：

另外，我读过最好从最小到最大的屏幕进行设计。这会是最好的流程吗？感谢您的回复。
除非您认为几乎所有流量都在桌面上，否则从小屏幕设计开始是个好主意。这样做的原因是它会让你对设计的重要组成部分进行批判性思考，因为你可能不得不在较小的屏幕尺寸上做出牺牲。因此，除了帮助设计之外，它还让您考虑产品/平台本身的元素 - 这是一个很好的练习。
我们的主要用户使用台式机或笔记本电脑，但我们希望准备好支持未来的其他设备。尽管那可能是在此之前的一段时间。感谢您的帮助。