最简单的响应式网格失败答案

【问题标题】：Simplest responsive grid fail最简单的响应式网格失败
【发布时间】：2017-01-13 02:38:49
【问题描述】：

我正在尝试创建一个包含两个相邻框的单列的响应式网格。 ⅓ 列在左侧，⅔ 列在右侧。这是http://codepen.io/htmlcheats/pen/OWMobO http://codepen.io/htmlcheats/pen/OWMobOcodepen 上的非响应版本：

<div class="pure-g">
    <div class="pure-u-1-3" style="background-color: red; height: 10em;">
        Box 1 - 33.3% width uses pure-1-3 style
    </div><!-- .pure-u-1-3 -->
    <div class="pure-u-2-3" style="background-color: teal; height: 10em;">
        Box 2 - 66.6% width uses pure-2-3 style
    </div><!-- .pure-u-2-3 -->      
</div><!-- .pure-g -->

它按预期工作。当我将它们挤压在一起或拉伸它们时，它们仍然相邻。

这是响应式版本（codepen，http://codepen.io/htmlcheats/pen/OWMobO）：

<div class="pure-g">    
    <div class="pure-sm-md-1-3 pure-u-md-1-3 pure-u-lg-1-3 pure-u-1" style="background-color: red; height: 10em;">
        Box 1 - 33.3% width uses pure-1-3 style
    </div><!-- .pure-u-1-3 -->
    <div class="pure-sm-md-2-3 pure-u-md-2-3 pure-u-lg-2-3 pure-u-1" style="background-color: teal; height: 10em;">
        Box 2 - 66.6% width uses pure-2-3 style
    </div><!-- .pure-u-2-3 -->  
</div><!-- .pure-g -->

当我挤压页面时，它们仍然相互重叠。如果我理解正确，他们应该折叠并创建一个单列，红色框位于蓝绿色的顶部。

你能告诉我我做错了什么吗？

【问题讨论】：

标签： yui-pure-css

【解决方案1】：

您的问题中的两个 codepen 链接（无响应和响应）是相同的 - 它们都链接到您的示例的无响应版本，但我发现我认为是您的 responsive example。

无论如何，要在 purecss 中启用响应式网格，您必须包含单独的响应式网格 CSS 文件以及基础 purecss 文件。来自responsive grids documentation：

由于媒体查询不能被覆盖，我们不将网格系统作为 pure.css 的一部分。您必须将其作为单独的 CSS 文件拉入。您可以通过将以下标签添加到您的页面来做到这一点。

<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<!--<![endif]-->

我使用了您的笔的响应版本，并将链接添加到响应 CSS 文件（上面的代码块）和 works as expected。最终，您的 CSS 链接应如下所示：

<!-- base purecss file -->
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">

<!-- purecss responsive grids -->
<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<!--<![endif]-->

【讨论】：

我发誓我浏览了大约 235 次文档。我好像是个骗子。并对被欺骗的链接感到抱歉。在这个问题上花了很多时间；不知道为什么脑子放屁。我希望有某种捐赠或提示机制来感谢您。我想我只能说……谢谢。