Html 媒体查询被忽略

我有两个徽标：一个用于小屏幕，一个用于大屏幕

与同一图像的不同分辨率不同，这是两个非常不同的

.png

文件，因此我无法使用缩放功能。在尝试使用它们时，我在

.jsp

页面中创建了以下

媒体查询

，目的是编辑一个div框，以便将文件显示为

背景图像

：

@介质（最小宽度：1200px）{
扎奇里分区{
背景：url（/assets/img/LargeLogo.png）；
宽度：764px；
高度：76px；
浮动：对；
}
}
@介质（最大宽度：1199px）{
zachery_div{
背景：url（/assets/img/SmallLogo.png）；
宽度：262px；
高度：76px；
浮动：对；
}
}

但是，只有当窗口的

宽度

低于

1199px

时，才会显示较小的徽标

如果我将窗口扩展到

1200px

或更高，则不会收到任何信息

两个图像都是有效的，因为交换它们的位置允许我调用其中一个，但决不能同时调用两个

---

你们谁能告诉我我的代码有什么问题吗？

当使用移动优先方法（

min width

）时，较小的值首先出现，因此您的代码是：

.zachery\u div{
高度：76px；
浮动：对；
}
@介质（最大宽度：1199px）{
扎奇里分区{
背景：url（/assets/img/SmallLogo.png）；
宽度：262px；
}
}
@介质（最小宽度：1200px）{
扎奇里分区{
背景：url（/assets/img/LargeLogo.png）；
宽度：764px；
}
}

请注意，

meta标记

不应位于

style

标记内。但是在

样式之前的
头部内部

由于您有重复的属性，我将它们放在
@media
之外，因为它们在代码中是“标准的”
当使用移动优先方法（
min width
）时，较小的值首先出现，因此您的代码是：

.zachery\u div{
高度：76px；
浮动：对；
}
@介质（最大宽度：1199px）{
扎奇里分区{
背景：url（/assets/img/SmallLogo.png）；
宽度：262px；
}
}
@介质（最小宽度：1200px）{
扎奇里分区{
背景：url（/assets/img/LargeLogo.png）；
宽度：764px；
}
}



请注意，
meta标记
不应位于
style
标记内。但是在
样式之前的
头部内部

由于您有重复的属性，我将它们放在
@media
之外，因为它们在整个代码中都是“标准的”