关于媒体查询的问题
Questions about media queries
我是网络开发的新手，我已经建立了一些网站，目前我正在处理一个大型项目。我正在为我的 MC-Server 创建一个网站。
为此，我正在处理媒体查询以确保该网站在各种设备上看起来都不错。
但是：我发现，有两种主要的媒体查询。
我的意思的例子：
@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) {
...
}
在优先级方面，将使用后面声明的样式，除非媒体查询中的样式具有不同的特异性级别，或者使用!important标记
您可以使用以下运算符进行媒体查询：
- , 被解释为单个媒体查询列表中的定界符，这些查询是或运算的。所以逗号之间的每个媒体查询首先被评估，然后它们被或在一起。这使逗号 / OR 的优先级最低。
- not 始终适用于整个媒体查询，而不扩展逗号。这给出了 NOT 之后的第二低优先级
逗号 / OR.
- not和only互斥，优先级相同
- 和的优先级最高
- () 括号仅用于媒体特征及其值，即 (color) 或 (min-width: 320px)。它们不能用于通过分组表达式更改优先级。
Source2
您已经在第一个示例中使用了布尔值。
@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 宽。 <p> 不总是红色的原因是第二条规则根据写入顺序覆盖了前一条规则。
对于 99% 的响应案例，您无需担心 width 和 ppi 以外的任何规则。但是，我应该注意，媒体查询与 @supports 的结构完全相同，可用于针对 IE 等行为不当的浏览器。在这些情况下，您将针对一些非常具体的属性进行测试。
示例：这将针对 IE 10 +
@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {...}
我是网络开发的新手，我已经建立了一些网站，目前我正在处理一个大型项目。我正在为我的 MC-Server 创建一个网站。
为此，我正在处理媒体查询以确保该网站在各种设备上看起来都不错。
但是：我发现，有两种主要的媒体查询。
我的意思的例子：
@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) {
...
}
在优先级方面，将使用后面声明的样式，除非媒体查询中的样式具有不同的特异性级别，或者使用!important标记
您可以使用以下运算符进行媒体查询：
- , 被解释为单个媒体查询列表中的定界符，这些查询是或运算的。所以逗号之间的每个媒体查询首先被评估，然后它们被或在一起。这使逗号 / OR 的优先级最低。
- not 始终适用于整个媒体查询，而不扩展逗号。这给出了 NOT 之后的第二低优先级 逗号 / OR.
- not和only互斥，优先级相同
- 和的优先级最高
- () 括号仅用于媒体特征及其值，即 (color) 或 (min-width: 320px)。它们不能用于通过分组表达式更改优先级。
Source2
您已经在第一个示例中使用了布尔值。
@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 宽。 <p> 不总是红色的原因是第二条规则根据写入顺序覆盖了前一条规则。
对于 99% 的响应案例，您无需担心 width 和 ppi 以外的任何规则。但是，我应该注意，媒体查询与 @supports 的结构完全相同，可用于针对 IE 等行为不当的浏览器。在这些情况下，您将针对一些非常具体的属性进行测试。
示例：这将针对 IE 10 +
@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {...}