媒体查询只有一个像素大小

Question

有没有办法只为一种尺寸创建媒体查询？

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

上面的例子显示图像将从484px开始消失。有没有办法编写媒体查询，其中图像只会在484px处消失并重新出现在485px而不添加其他媒体查询？

此外，有没有办法编写媒体查询来执行两种尺寸之间的事情，而无需编写2-3个媒体查询？

我想知道是否有办法在一行上写下这两个。

Answer 1

为什么不只是

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

也就是说：

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

Mozilla's documentation for media-query media-features

Answer 2

您可以链接媒体查询：

仅隐藏484像素的图像：

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

<强>更新

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

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

Answer 3

您应该执行以下代码：

<强> CSS：

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

它只会隐藏在定义的pixels。

希望它对你有所帮助。