Question

.hide-for-small-only是max-width 0 - 39.9375em

但.show-for-small-only仅为0em - 40em。

不应该是.hide-for-small-only-0 -40em，因为那是.show-for-small-only的数字？为什么这两个查询之间的最大宽度不同。

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

Answer 1

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

基金会的@Media查询

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

/ *中等和上* / @media屏幕和（min-width：40em）{}

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

/ *大而向上* / @media屏幕和（min-width：64em）{}

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

所以当宽度=== 40em时，我们会期待中等。

.hide-for-small-only max-width: 39.9375em的原因是width可能完全等于39.9375em且条件为真（例如隐藏）。因此，对于small范围内的所有宽度值，此元素由display: none 隐藏。这非常简单易读。

如果您想要显示元素（.show-for-small-only）仅适用于0到39.9375em，那么您想要隐藏的第一个宽度内容将是small === 40em上的一个像素（因此min-width: 40em）。这不是说x和y之间显示的媒体查询，而是隐藏在x和y之下。

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

我认为max-width: 0em是因为@media查询是由SASS mixin生成的，并且必须适用于所有“仅”类，这实际上需要max-width来定义底部宽度，但不是很小。

基础媒体查询 - 仅限小型隐藏

1 个答案: