Css 针对同一断点的多个媒体查询

我从一家机构收到一些移动导航的模板，看到他们对同一断点（本例中为991px）有不同的媒体查询，如下所示，一个接一个。通常，我只使用第三个选项进行编码，该选项只指定最大宽度而不指定方向。这样做有什么意义，特别是当我并排比较时，发现他们的第一次和第二次媒体查询几乎没有区别。我应该先删除重复数据，然后合并所有3个吗

@media (max-width:991px) and (orientation:portrait) {}
@media (max-width:991px) and (orientation:landscape) {}
@media (max-width:991px) {}

---

@Kelly看来，它可能只会在平板电脑、手机和具有纵向和横向功能的设备上发生变化。想象一下你改变了你的设备主轴，例如水平轴到垂直轴。然后这个CSS代码出现在场景中。如果你想让你的视图对这种情况做出响应，我认为你应该应用当前的媒体查询。

你可以安全地选择纵向和横向选项，因为它们被第三个选项覆盖

然而，这个问题的提出以及我们正在思考这一事实意味着它并非完全是直觉的。如果您考虑更“正常”的CSS规则，则更具体的规则会覆盖不太具体的规则。比如说

p.col { color: red; }
p { color: green; }

带有col类的段落将有红色文本

相比之下

@media (orientation : portrait), @media ( orientation : landscape ) {
  p { color: red; }
}

p { color: green; }

将有绿色的段落，即使事先已做出更具体的选择

---

因此，对于代码的未来读者来说，保留纵向和横向媒体查询可能更为清晰，而放弃一般（第三个）查询，特别是如果有很多纵向或横向媒体查询的实例，因为这将清楚地显示它们的相同位置。

请记住，CSS方向不会告诉您设备的方向，而是告诉您视口的方向。在windows PC上，浏览器可能在纵向模式的窗口上运行。在类似iPhone的设备上，尽管设备可能是纵向的，但如果键盘出现，视口可能会变成横向。谢谢！我想我要合并代码，因为纵向和横向之间的代码没有区别，只是重复而已。