Question

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

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

<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时，这只会给我一个较小的徽标。

如果我将窗口展开到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 tag不应位于style标记内。但在head

之前的style内

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

媒体查询被忽略

1 个答案: