Css 基础媒体查询-只针对小的隐藏

仅适用于小尺寸的.hide最大宽度为0-39.9375em

但是，只有在0em-40em时才有小型的.show

因为这是仅用于.show的数字，所以.hide for small不应该是0-40em吗？为什么这两个查询之间的最大宽度不同

@media screen and (max-width: 39.9375em) {
  .hide-for-small-only {
    display: none !important; } }

@media screen and (max-width: 0em), screen and (min-width: 40em) {
  .show-for-small-only {
    display: none !important; } }

---

这是一个权宜代码和可理解代码略有不同的时代

基金会的@媒体查询

/*仅小型*/@媒体屏幕和（最大宽度：39.9375em）{}

/*中等及以上*/@媒体屏幕和（最小宽度：40em）{}

/*仅介质*/@介质屏幕和（最小宽度：40em）和（最大宽度： 63.9375em）{}

/*大而高*/@媒体屏幕和（最小宽度：64em）{}

/*仅大*/@媒体屏幕和（最小宽度：64em）和（最大宽度： 74.9375em）{}

所以当宽度===40em时，我们期望中等

.hide for small only

的原因是

最大宽度：39.9375em

是因为

宽度

可能正好等于

39.9375em

，并且条件为真（例如hide）。因此，对于

small

范围内的所有宽度值，该元素通过

display:none

隐藏。这是非常简单易懂的

而如果您只想显示元素（

.show for small

）0到39.9375em，那么您想隐藏内容的第一个宽度将是

small

==40em（因此

最小宽度：40em

）。这不是一个表示在x和y之间显示的媒体查询，而是表示隐藏在x下和y上

最让人困惑的部分其实是因为它们被命名为一个“隐藏”，另一个“显示”。。。但实际上它们都隐藏了，但宽度不同

---

我假设

max width:0em

是因为@media查询是由SASS mixin生成的，它必须适用于所有“only”类，实际上需要

max width

来定义底部宽度，但对于小型计算机来说，情况并非如此。

这是一个方便的代码和可理解的代码略有不同的时代

基金会的@媒体查询

/*仅小型*/@媒体屏幕和（最大宽度：39.9375em）{}

/*中等及以上*/@媒体屏幕和（最小宽度：40em）{}

/*仅介质*/@介质屏幕和（最小宽度：40em）和（最大宽度： 63.9375em）{}

/*大而高*/@媒体屏幕和（最小宽度：64em）{}

/*仅大*/@媒体屏幕和（最小宽度：64em）和（最大宽度： 74.9375em）{}

所以当宽度===40em时，我们期望中等

.hide for small only

的原因是

最大宽度：39.9375em

是因为

宽度

可能正好等于

39.9375em

，并且条件为真（例如hide）。因此，对于

small

范围内的所有宽度值，该元素通过

display:none

隐藏。这是非常简单易懂的

而如果您只想显示元素（

.show for small

）0到39.9375em，那么您想隐藏内容的第一个宽度将是

small

==40em（因此

最小宽度：40em

）。这不是一个表示在x和y之间显示的媒体查询，而是表示隐藏在x下和y上

最让人困惑的部分其实是因为它们被命名为一个“隐藏”，另一个“显示”。。。但实际上它们都隐藏了，但宽度不同

我假设

max-width:0em

是因为@media查询是由SASS mixin生成的，它必须适用于所有“only”类，这实际上需要

max-width

来定义底部宽度，但对于小类来说就不需要这么多了