7

使用纯网格，我的网站没有正确响应，因此我尝试将默认的响应式网格代码复制并粘贴到我的文件中，但它仍然无法正常运行。

这是他们网站上列出的默认代码：

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

我的完整代码可以在这里找到。在浏览器中查看以下代码时，这三组点看起来好像彼此堆叠在一起，或者以 100% 的列宽。从每个类列表中删除“pure-u-1”会显示它们，就好像这些点都非常小并且彼此重叠，从字面上看（不像块一样堆叠，因为你只能看到一组点）。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>B&W Vending</title>

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>

<body>

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

</body>
</html>
4

1 回答 1

19

由于纯 css 网站上的说明相互矛盾，我自己弄明白了。一旦我包含了以下样式表，它就起作用了。

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

在其中一个纯 CSS 网格页面中，它指出：

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

稍后在页面中它陈述了看似相反的说明：

网格是纯 CSS 文件的一部分。但是，如果您只需要 Grids 而不是其他模块，则可以单独将其拉下。

于 2015-03-11T00:29:18.880 回答