html - 关于媒体查询的问题

标签 html css media-queries

我对 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:处理查询的顺序是什么?分辨率优先还是比例优先?

最佳答案

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

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

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

关于html - 关于媒体查询的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63730655/

相关文章:

css - 父 div 内的 3 个 div 不自动调整大小

javascript - 提交表单后重定向页面 - Javascript

html - 我想将 3 个 div 彼此相邻放置,并使用背景色

css - 电子邮件文本显示为不同的颜色

javascript - Muses 广播播放器 css 而不是皮肤文件

CSS:响应式 UL/LI

javascript - Ajax 无法将 html 页面作为参数传递给后面的代码

html - 文本在小尺寸屏幕上显示为多行

html - CSS 媒体查询设备纵横比不适用于 16/9

javascript - Tabs 和 JS 平滑滚动问题(两次点击)