Question

在过去的几年里，我一直在处理min和max width用于我为我所工作的公司开发的网站的问题。

虽然我可以通过改变突破点来轻松解决这个问题，但是我不知道为什么会发生这种情况，并且在网站进行了一些修改后我会继续讨论这个问题。

所以问题可能是大多数人都知道非100％的差距。这个问题与屏幕缩放无关，而只是一个断点，它不像预期的那样起作用，或者至少我期望它起作用。

（举例说明我把这种情况放在一起。在某些情况下，在开发过程中会出现这些问题）

对于此示例，我有2 div个，分别为test1和test2。

<div class="test1">
  test 1
</div>
<div class="test2">
  test 2
</div>

div＆＃39}应该正常隐藏，但在某些情况下，您希望它们显示。因此，我们假设我们想要在桌面上展示test2并在移动设备上展示test1。这将导致像下面的CSS

@media (min-width: 768px) {
  .test2{
    display: block;
  }
}
@media (max-width: 768px) {
  .test1{
    display: block;
  }
}

现在出现了奇怪的部分一旦我显示网站并开始调整页面大小，两者都将以768px的宽度可见，这不是理想的结果。

我不明白为什么会发生这种情况的原因是，当我在网上看时，我只看到媒体查询基本上做了以下事情（据我了解）

对于最小宽度：
如果视口等于或大于最小宽度，请在媒体查询中应用样式

对于max-width：
如果视口小于或等于max-width，请在媒体查询中应用样式

如果你实际应用这个，你会认为当视口达到768px断点时，两个媒体查询都会触发并隐藏test2 div并显示test1。

希望有人可以为我阐明这一点。

我还制作了一个codepen示例

亲切的问候。

Answer 1

你错过了一个非常简单的逻辑。对于768，div的两个部分都是可见的，因为你在媒体查询中为min和max定义了768。这是正确的方法：

@media (min-width: 768px) {
.test2{
    display: block;
  }
}
@media (max-width: 767px) {
  .test1{
    display: block;
  }
}

Answer 2

因为min/max-width具有相同的断点。

这就是为什么在使用min-width时，它会添加一个像素或其他方式将像素减去max-width。

考虑到这一点，您有两个选择：

第一

@media (min-width: 769px) {
.test2{
    display: block;
  }
}
@media (max-width: 768px) {
  .test1{
    display: block;
  }
}

第二

@media (min-width: 768px) {
.test2{
    display: block;
  }
}
@media (max-width: 767px) {
  .test1{
    display: block;
  }
}

您可以阅读media queries order matters?

Answer 3

也可以使用此方法应用：

＆＃13;

@media (min-width: 769px) {
  .test2{
    display: block;
  }
  
  .test1{
    display: none;
  }
}
@media (max-width: 768px) {
  .test1{
    display: block;
  }
  
  .test2{
    display: none;
  }
}

＆＃13;

<div class="test1">
  test 1
</div>
<div class="test2">
  test 2
</div>

＆＃13;

使用媒体查询的最小值和最大值时的1px差距

3 个答案: