基金会媒体查询 - 隐藏换只小

的.hide换小不仅是最大宽度0 - 39.9375em基金会媒体查询 - 隐藏换只小

但.show换小仅是0EM - 40EM 。

不应该只是.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; } }

来源

2017-04-09 Pathway

这是那些时代代码和可理解代码稍有不同的东西之一。

基金会的@media查询

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

/*中和了*/@media屏幕和（最小宽度：40EM）{}

/*仅培养基*/@media屏幕和（最小宽度：40EM）和（最大宽度： 63.9375em）{}

/*大型一个（最小宽度：64em）和（最大宽度： 74.9375em）{}大屏幕和（最小宽度：64em）{}

/

因此，当宽度=== 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生成的，并且必须适用于所有“only”类，这实际上需要max-width来定义底部宽度，但不是那么多小。

来源

2017-04-09 18:58:14 tymothytym

基金会媒体查询 - 隐藏换只小

回答

相关问题