html - 关于媒体查询的问题

Question

我对 Web 开发比较陌生，我已经建立了一些网站，目前我正在处理一个大型元素。我正在为我的 MC-Server 创建一个网站。

为此，我正在处理媒体查询，以确保网站在各种设备上看起来都不错。

但是:我发现有两种主要的媒体查询。

我的意思的例子:

@media screen and (min-width: 1921px) {...} 
@media (-webkit-min-device-pixel-ratio: 1.25) {...} 

(我知道这还不是标准)

我无法使用这些。在 1.75 的 1080p 显示器上，我需要例如与 1440p 1.75 显示器等不同的定位。

问题 #1:我可以合并两个媒体查询吗？例如。显示必须为 1080p AND 1.75 比例才能使用此查询。

问题 #2:处理查询的顺序是什么？分辨率优先还是比例优先？

Answer 1

您可以将媒体查询与逗号组合，如下所示:

@media only screen and (orientation : landscape) , only screen and (min-device-width : 481px) and (orientation : portrait) {
    ...
}

在优先级方面，将使用后面声明的样式，除非媒体查询中的样式具有不同的特异性级别，或者使用了 !important 标记