Html 关于媒体查询的问题

我对网络开发比较陌生，我已经建立了一些网站，目前我正在处理一个大型项目。我正在为我的MC服务器创建一个网站

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

但是：我发现，有两种主要的媒体查询

举例说明我的意思：

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

（我知道这还不是一个标准）

我使用这些东西有困难。在带有1.75的1080p显示器上，我需要比1440p 1.75显示器上的其他位置等

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

---

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

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

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

---

就优先级而言，将使用稍后声明的样式，除非媒体查询中的样式具有不同的特殊性级别，或者是

！重要信息

使用了标记

您可以使用以下运算符进行媒体查询：

，被解释为单个媒体查询列表中的分隔符，这些查询是OR。因此，首先计算逗号之间的每个媒体查询，然后将它们一起进行OR运算。这将提供逗号/或最低优先级

不始终适用于全媒体查询，不超过逗号。这并没有给出第二个最低的频率 逗号/或

not和only相互排斥，优先级相同

和的优先级最高

（）括号仅用于媒体功能及其值，即（颜色）或（最小宽度：320px）。它们不能用于通过分组表达式来更改优先级

---

在第一个示例中，您已经在使用布尔值

@media and (condition) and (condition) not (!condition) { ... }

其他人提到的逗号与OR有关。其工作方式与堆叠一组类相同：

.myclass1, myclass2, div, p {
  color: red;
}

这意味着上述任何一项都将匹配，其中的文本将为红色

如果要覆盖或强制优先级，只需在稍后放置另一个声明：

@media only screen and (max-width: 1000px) {
  p{
    color: red;
  }
}

@media only screen and (max-width: 500px) {
  p{
    color: blue;
  }
}

在这种情况下，段落标记将变为蓝色，直到渲染宽度大于500px，然后变为红色，最大宽度为1000px。

不总是红色的原因是，第二条规则基于写入顺序覆盖了前一条规则

对于99%的响应案例，除了

width

和可能的

ppi

之外，您不需要担心任何规则。但是，我应该注意到，媒体查询的结构与

@支持的
完全相同，可以用于针对IE等行为不正常的浏览器。在这些情况下，您将针对一些非常特定的属性进行测试

示例：这将针对IE10+

@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {...}

是的，您可以准确地执行该示例：@media only screen and（最小宽度：1921px）、only screen and（-webkit min device pixel ratio:1.25）{}问题2从上到下读取css文件，最后一个匹配值是应用的值，然后是应用于本文中解释的文档的过程