如何组合两个或多个媒体查询以获得更具体的断点

Question

嘿，我正在尝试制作一个响应式网络，我想知道您是否可以对具有高视图端口的特殊手机（例如 Galaxy s23、iPhone 12/13）进行组合媒体查询。

我的意思是我们都知道你可以有常见的断点，例如

@media (width <= 450px)

对于手机等

但有时我们有特殊的电话 需要处理 372×900 视口，所以我只是想知道是否有任何选项可以组合所有媒体查询以获得类似的视口。

我尝试为特殊手机的特定媒体查询找到一些解决方案，但定义要处理的特定视图端口似乎不太明智。

Answer 1

如果您的意思是同时定位屏幕宽度和屏幕高度，则可以通过使用（和）分隔它们来实现，例如=>

@media screen and (min-width: 30rem) and (min-height: 60rem) {
   /* … */
}

您甚至可以为屏幕方向添加更多角色=>

@media screen and (min-width: 30rem) and (min-height: 60rem) and (orientation: landscape) {
      /* … */
}