最简单的响应式网格失败

Question

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

上 codepen 上的无响应版本

<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 -->

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

这是响应式版本（代码笔在 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 -->

当我压缩页面时，它们仍然彼此重叠。如果我理解正确的话，它们应该折叠并创建一个单独的列，红色框位于青色框之上。

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

Answer 1

你的问题中的两个 codepen links（无响应和有响应的）是相同的 - 它们都 link 到你的示例的无响应版本，但我发现我认为是你的 responsive example.

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

Since media queries cannot be over-written, we do not include the grid system as part of pure.css. You'll have to pull it in as a separate CSS file. You can do this by adding the following tag to your page.

<!--[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]-->

我使用了你的笔的响应版本并将 link 添加到响应 CSS 文件（上面的代码块）和它 works as expected。在一天结束时，您的 CSS link 应该如下所示：

<!-- 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]-->

最简单的响应式网格失败

Simplest responsive grid fail

yui-pure-css