Foundation 媒体查询 - hide-for-small-only答案

【问题标题】：Foundation media query - hide-for-small-onlyFoundation 媒体查询 - hide-for-small-only
【发布时间】：2017-04-10 16:29:54
【问题描述】：

.hide-for-small-only 的最大宽度为 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; } }

【问题讨论】：

标签： css zurb-foundation

【解决方案1】：

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

基金会的@Media 查询

/* 仅小 */ @media screen and (max-width: 39.9375em) {}

/* 中等及以上 */ @media screen and (min-width: 40em) {}

/* 仅中等大小 */ @media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* 大或大 */ @media screen and (min-width: 64em) {}

/* 仅大 */ @media screen and (min-width: 64em) and (max-width: 74.9375em) {}

所以当宽度 === 40em 时，我们期望 medium。

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

【讨论】：