html - 媒体查询被忽略

Question

我有两个 Logo :一个用于小屏幕，一个用于大屏幕。

这不是同一图像的不同分辨率，而是两个非常不同的 .png 文件，因此我无法使用缩放功能。在尝试使用它们时，我在 .jsp 页面中创建了以下 media queries，目的是编辑 div 框以便将文件显示为 背景图片:

<style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
@media (min-width: 1200px) {
  .zachery_div {
    background: url(/assets/img/LargeLogo.png);
        width: 764px;
        height: 76px;
        float: right;
  }
}

@media (max-width: 1199px) {
  .zachery_div {      
     background: url(/assets/img/SmallLogo.png);
        width: 262px;
        height: 76px;
        float: right;
  }
}
</style>

但是，当窗口的 width 低于 1199px 时，这只会给我较小的 Logo 。

如果我将窗口扩展到 1200px 或以上，我什么也收不到。

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

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

Answer 1

当使用移动优先方法 (min-width) 时，较小的值优先，因此您的代码将是:

.zachery_div {
  height: 76px;
  float: right;
}
@media (max-width: 1199px) {
  .zachery_div {
    background: url(/assets/img/SmallLogo.png);
    width: 262px;
  }
}
@media (min-width: 1200px) {
  .zachery_div {
    background: url(/assets/img/LargeLogo.png);
    width: 764px;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">

请注意，meta 标签 不应位于style 标签内。但在 style

之前的 head 中

因为你有重复的属性，我把它们放在 @media 之外，因为它们是整个代码的“标准”