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

Question

嘿，我正在尝试制作一个响应式网页，我想知道你是否可以为具有高视口的特殊手机(如galaxy s23, IPhone 12/13)提供组合媒体查询。

我的意思是我们都知道你可以有常见的断点，比如@media (width <= 450px)

手机等

但有时我们有特殊的电话372×900 viewport要照顾，所以我只是想知道是否有任何选项来组合所有媒体查询类似的视图端口。

我试图为特殊手机的特定媒体查询找到一些解决方案，但定义一个特定的视口来照顾似乎不那么聪明。

Answer 1

如果你想同时显示屏幕宽度和屏幕高度，你可以用(and)分隔它们，比如=>

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

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

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