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 */
}

我有一种强烈的感觉，它与最小宽度有关，所以有没有办法在不使用最小宽度的情况下定位768px的宽度？

谢谢！

Answer 1

为了特定像素，我在下面的代码中使用了

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

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

}

当您使用上述媒体查询时，更改将针对767和768像素，因此您也需要以768像素进行倒数编码。

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

@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;
  }
}

Answer 2

您的代码有误..只有您可以使用min-width后才能使用max-width ..

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

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

2 个答案: