时间戳

首页 > 解决方案 > 所有平台的媒体查询，哪一个是正确的语法

html - 所有平台的媒体查询，哪一个是正确的语法

问题描述

关于以下链接：

媒体查询中的“屏幕”和“仅屏幕”有什么区别？

“only”用于媒体查询，因此不支持的旧浏览器media query应该只读（并且因为连字符或字母不存在，而是一个空格 - 他们将停止进一步阅读），其余代码将不会应用（因为“仅”不是设备类型）。

总之，我们应该始终将“仅”写为良好实践，我们的代码将如下所示：

@media only screen and (min-width: 300px) and (max-width: 800px) { ... }

但是，使用该逻辑并应用only以防止旧浏览器在读取后不支持媒体查询和其他关键字时弄乱代码screen- 以下 CSS 将全局应用（参见上面的链接）。

现在，如果我想为 编写某些媒体查询all platforms，即。https://www.w3.org/TR/CSS2/media.html

我的正确代码现在应该是什么：

@media only all and (min-width: 300px) and (max-width: 500px) { ... }

或者

@media all and (min-width: 300px) and (max-width: 500px) { ... }

请记住，all是一个设备类型的关键字，因此在相同的逻辑下，旧版浏览器将（如果仅不使用关键字），将在全球范围内应用任何存在的 CSS 代码。

另一方面，我从未见过这样的代码，only all我所期望的是语法错误并且 CSS 不会运行。

现在，有人可以为我提供合理的解决方案，这两个选项中哪一个是正确的？

标签： htmlcssmedia-queries

解决方案

由于现在所有浏览器都支持媒体查询，您可以直接使用@media它，它可以毫无问题地工作。bootstrap 也使用@meida了现在在所有浏览器上都可以使用的东西。

@media (min-width: 300px) and (max-width: 500px) { ... }

因此，您只需要使用@media，您将获得与使用相同的结果

@media only screen and (min-width: 300px) and (max-width: 500px) { ... }

请参考此链接，我相信它会有所帮助MDN @media

此外，此链接是非常有用的MDN 媒体查询

推荐阅读