基础5行宽答案

【问题标题】：Foundation 5 row width基础5行宽
【发布时间】：2015-04-07 20:28:51
【问题描述】：

我想知道如果行宽仅为 62.5rem，那么在 Foundation 5 中对 XLarge 和 XXLarge 设备进行媒体查询的目的是什么，显然任何人都可以更改该大小，但是如果在大屏幕中将其作为默认值，其目的是什么会看起来很小吗？

【问题讨论】：

标签： row zurb-foundation

【解决方案1】：

我认为这些媒体查询用于构建可见性类（hidden-for-xlarge-only、visible-for-xxlarge-up 等）。也许有人在某个时候会使用 100rem 行并需要这些类，但我必须同意这看起来像一个边缘案例。

【讨论】：

【解决方案2】：

xlarge 和 xxlarge 媒体查询在 Foundation 5 上默认禁用。要启用它们，您必须在配置设置中覆盖变量 $include-xl-html-grid-classes: true;。

我已经用以下值覆盖了默认配置，它对我来说很好：

...
$include-xl-html-grid-classes: true;

// Media Query Ranges
$small-range: (0px, 428px);
$medium-range: (429px, 591px);
$large-range: (592px, 784px);
$xlarge-range: (785px, 980px);
$xxlarge-range: (981px, 99999999px);
...

干杯！

【讨论】：

【解决方案3】：

现在这些媒体查询已在基础 5 中更改。

// 超大屏幕 @media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screen */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px，在QAing xlarge screen-only问题时使用*/

// 超大屏幕 @media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge 屏幕 */

请查看官网http://foundation.zurb.com/docs/media-queries.html

谢谢，拉金

【讨论】：

您的网站在大屏幕上看起来很小，因为您可能使用过诸如“max-width:62.5rem”之类的 css