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处的codepen）：

<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链接（无响应和响应的链接）是相同的 - 它们都链接到您的示例的无响应版本，但我发现我认为是您的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]-->

最简单的响应式网格失败

1 个答案: