Pure.css断点不起作用

Question

Fiddle

我正在尝试制作一个响应网格，在较大的屏幕上每行显示2个项目，在较小的屏幕上只显示一个。

现在我发现你可以用Pure.css来做这件事，但我有正确的语法，它不起作用。

这些项目只是停留在同一条线上，直到它们在一起。

<div class="pt-holder pure-u-1-2 pure-u-md-1-1">                    
    <img src="Images/pt/mikko.jpg" alt="Mikko Paavola" />
        <h3>Mikko Paavola</h3>              
        <span> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet dapibus quam, sit amet tempor felis egestas et. In eu metus ultrices, 
            luctus nunc egestas, euismod magna.
            ...

Answer 1

我已经分叉了你的Fiddle，为现代浏览器添加了必要的grids-responsive-min.css，并调整了你的html/css。它现在起作用了，请在http://jsfiddle.net/macguru2000/pkfsoavg/

我不得不删除.pt-holder的css规则，因为纯网格的div不应该应用任何自定义规则。此外，我删除了.pt-holder span上20%的填充，这抵消了照片下的文字。我还交换了您的响应网格设置pure-u-1-1 pure-u-md-1-2。宽显示器显示两列，窄显示器显示一列，这对我来说更有意义。

但是。。。通过将纯网格类交换回pure-u-1-2 pure-u-md-1-1，您可以很容易地回到具有一个col的宽监视器和具有两个col（col）的窄监视器。

所以你知道，必须包含纯响应网格css文件，下面的html片段可以用于包含核心pure.css和响应网格（包括现代浏览器和旧IE）

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->

Answer 2

我不喜欢Pure这样的第三方工具的原因之一是，如果你有问题，只有该工具的其他用户才能回答！另一种方法是自己做，这相当容易。关于如何建立自己的网格，有几个很好的解释；试试在http://www.responsivegridsystem.com/.