只针对一个像素尺寸的媒体查询

Question

有没有一种方法只针对一个尺寸创建媒体查询？

@media(min-width: 484px) {
      img {
           display: none;
      }
}

上面的示例显示，在484px处开始，图像将消失。有没有办法编写媒体查询，在仅在484px处消失并在485px处重新出现而不添加另一个媒体查询？

此外，有没有办法编写媒体查询，在两个尺寸之间执行某些操作，而不编写2-3个媒体查询？

我想知道是否有一种方法可以在一行上编写这两个查询。

- BinaryDude87

---

为什么不直接使用 @media (width:484px) { ... }？(https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Pseudo-BNF) - user3186555

为什么这个问题还没有被选中的答案呢？有什么原因吗？ - An Original Alias

Answer 1

为什么不只是这样呢？

@media (width:484px) { ... }

?

也就是说：

@media(width: 484px) {
      img {
           display: none;
      }
}

Mozilla关于媒体查询媒体特性的文档

- user3186555

Answer 2

您可以链接媒体查询：

为了仅在484px时隐藏图像：

@media (min-width: 484px) and (max-width: 484px)  {
      img {
           display: none;
      }
}

更新

@DaMaxContent 提供了更好的解决方案。 只需使用宽度而不是最小宽度和最大宽度。

 @media (width: 484px) {
          img {
               display: none;
          }
    }

- Carlton

---

为什么不直接使用 @media (width:484px) { ... }？（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Pseudo-BNF） - user3186555

此外，一个是排他的，另一个是包容的是无意义的。所有范围媒体特性都是包容的。给定的媒体查询将匹配483px和484px，而不仅仅是484px。 - BoltClock

没关系，你也教会了我一些东西 :) - Carlton

Answer 3

你应该像下面的代码一样操作：

CSS:

@media(min-width: 484px) and (max-width: 484px) {
      img {
           display: none;
      }
}

它只会在定义的像素处隐藏。

希望能对您有所帮助。

- Shashank

---

请问踩分者，能否解释一下为什么这个方案是不正确的？ - Shashank

已经解释了两次。我不会重复别人说过的话。 - BoltClock