css显示屏幕大小是否为1200或更大或介于

您好，我想根据在移动设备上查看的页面大小显示不同的徽标

如果页面宽度大于或大于1025px，我想显示一个图像；如果屏幕大小在600和1025px之间，我想显示另一个图像；如果屏幕大小最大为300px，我想显示另一个图像。我只想展示一张图片。无论我尝试什么，我要么展示全部三个，要么只展示一个。谁能给我点化一下吗。多谢各位

@media only screen and (max-width: 1025px) {
#logo768 { display: none;}
#logo1025 { display: none;}
}
@media only screen and (max-width: 600px) {
#logo1025 { display: none;}
#logo300 { display: none;}
}
@media only screen and (min-width: 399px) {
#logo768 { display: none;} 
#logo1025 { display: none;}
}

---

考虑使用

图片

。这是一种更优雅的方法，更易于维护。将选择

属性。
然后，选定的图像将显示在图像所占用的空间中

您需要考虑与问题的自然语言描述相关的
max width
和
min width
的实际含义。您声明“如果屏幕大小最大为300px”，但在媒体查询中您声明了
最小宽度：399px
（为什么不
最大宽度
？）。简言之，你似乎有你的逻辑回到前面。也要考虑这些指令的顺序。因此，通常的方法是：<代码>最大宽度< /代码>，如果您想将样式应用到该宽度，则<代码>最小宽度

如果要从该宽度开始应用样式；因此，如果您想要一个范围，例如，您可以说：

@media（最小宽度：300px）和（最大宽度：600px）

，因此这些样式仅适用于从300px开始，但直到600px，当屏幕宽度介于300和600之间时，您希望显示什么？谢谢，但我需要隐藏整个div作为导航标志的标题。我需要改变每一页大小的所有。谢谢你的帮助