如何使用媒体查询定位特定像素宽度

Question

您好，我有一个关于特定宽度而不是其他宽度的媒体查询的问题。

我想将屏幕宽度设为 768px 而没有其他宽度。现在要针对它我正在使用

@media (max-width:769px) and (min-width:768px) {
    /* my css */
}?

这工作正常，但它阻止了我下面的其他媒体查询不起作用。例如当我去的时候：

@media (max-width:769px) and (min-width:768px) {
    /* my css */
}?

@media (max-width:600px) {
   /* this css will not work */
}?

我有一种强烈的感觉，这与 min-width 有关，所以有什么方法可以在不使用 min-width 的情况下仅将宽度设为 768px 吗？

谢谢！

Answer 1

为了特定像素，我使用了以下代码 -

@media (min-width:767px) and (max-width:768px) {

  /* CSS To Target 767 px width of screen */

}

当您使用上述媒体查询时，将针对 767 和 768 像素进行更改，因此您还需要在 768 像素中执行互惠代码。

例如 - 如果您要隐藏 767 像素的图像，但希望以 768 像素到 991 像素的媒体查询显示，则可以使用 -

@media (min-width:767px) and (max-width:768px) {

   /* CSS To Target 767 px width of screen */

  /* Hide Image at 767 px */
  .hide-logo-image{ 
      dispaly: none;
   }
}

然后您还需要在 768px 到 991px 媒体查询中执行互惠代码，如下所示 -

@media (min-width:768px) and (max-width:991px) {

  /* CSS To Target screen above 768px and below 991px width of screen */

  /* Show Image above 768 px */
  .hide-logo-image{ 
      dispaly: block;
  }
}