Html 所有平台的媒体查询，哪种语法正确

关于以下链接：

“only”用于媒体查询，因此不支持

媒体查询的旧浏览器应为只读（由于不存在连字符或字母表，但存在空格-它们将停止进一步读取），其余代码将不应用（因为“only”不是设备类型）

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

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

但是，有了这种逻辑，并应用
仅
，以防止旧浏览器在不支持媒体查询的情况下弄乱代码，或者在读取后应用
屏幕
关键字-以下CSS将全局应用（见上面的链接）

现在，如果我想为所有平台编写特定的媒体查询，即

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

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

或

请记住，
all
是一个设备类型的关键字，因此使用相同的逻辑，较旧的浏览器将（如果只使用关键字），无论存在什么CSS代码，都将全局应用

另一方面，我从未见过像
only all
这样的代码，所以我希望它在语法上是错误的，CSS不会运行

现在，有人能给我提供一个合理的解决方案吗？这两个选项中哪一个是正确的？
因为现在所有的浏览器都支持媒体查询，所以您只需使用
@media
，它就可以正常工作了。此外，bootstrap还使用了
@meida
，这是目前所有浏览器都可以使用的功能

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

因此，您只需使用
@media
，就可以得到与使用相同的结果

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

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

而且，这个链接非常有用

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