在媒体查询中使用最小值和最大值时的1px间距 [英] the 1px gap when using min and max with media queries

问题描述

过去几年中，我一直在为自己工作的公司开发的网站处理min和max width使用情况的问题.

尽管我可以通过更改断点来轻松解决此问题，但令人烦恼的是我不知道为什么会发生这种情况，并且在网站进行了一些修改之后，我仍会继续探讨此问​​题.

因此，对于非100％的差距，这个问题可能是最广为人知的. 这个问题与屏幕缩放无关，而只是一个断点，其功能可能不尽如人意，或者至少我不希望它如何工作.

(例如，我将发生这种情况的情况汇总在一起.在某些情况下，在开发过程中发生了类似的事情)

在此示例中，我有2个div，分别具有类test1和test2.

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

两个div都应正常隐藏，但在某些情况下，您希望它们显示. 因此，可以说我们想要在台式机上显示test2而在移动设备上显示test1的情况. 这将导致如下所示的CSS

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

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

我不明白为什么会发生这种情况的原因是，当我在互联网上看时，我只读到媒体查询基本上会执行以下操作(据我了解)

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

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

如果您实际应用此方法，您会认为视口到达768px断点的那一刻，两个媒体查询都将触发并隐藏test2 div并显示test1.

希望有人可以帮我一下.

我还制作了一个 codepen 示例

亲切的问候.

解决方案

因为您为min/max-width使用了相同的断点.

这就是为什么使用min-width时会在max-width上添加像素或以其他方式减去像素.

考虑到这一点，您有2个选择:

第一

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

您可以阅读有关媒体查询顺序的问题吗?

I have been dealing with an issue with min and max width usage in the last few years with websites I am developing for the company I work for.

Though I can easily get around this by just changing the breaking points, it annoys that I don't know why it is happening and I keep walking into this issue after the websites have had some modifications.

So the issue is probably most know for the non-100% gap. This issue though is not related to screen zoom but rather just a breakpoint that isn't functioning like would be expected from it or at least how I expect it to work.

(For the example I put together a situation this happens in. There are some situations that something along these lines happens in the development process)

For this example I have 2 div's with classes test1 and test2 respectively.

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

Both div's should be hidden normally but in certain situations you would want them to show. So lets say we get to the situation where we want to show test2 on desktop and test1 on mobile. That would result in a CSS like below

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

Now comes the weird part.
As soon as I show the website and start resizing the page both will be visible at exactly 768px width which is not the desired result.

The reason I don't understand why this happens is that when I look on the internet I only read that a media query basically does the following (as far as I understand it)

For min-width:
IF the viewport is equal to or bigger than the min-width, apply the styling in the media query

For max-width:
IF the viewport is lesser than or equal to the max-width, apply the styling in the media query

If you would practically apply this you would think that the moment the viewport reaches the 768px breakpoint both media queries would trigger and hide the test2 div and show test1.

Hope someone could shed some light on this for me.

I also made a codepen example

Kind regards.

解决方案

Because you have the same breakpoint for min/max-width.

That's why when min-width is used it's added a pixel or other way around subtracting a pixel to max-width.

With this in mind, you have 2 options:

First

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

Second

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

You can read about media queries order matters?

这篇关于在媒体查询中使用最小值和最大值时的1px间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！