1

我有以下 SASS 和 HTML 代码。我正在使用 Yahoo 的 PureCSS。

我正在尝试做的事情

我试图让它有一个用于大型桌面尺寸屏幕的 3 列布局，这些pure-lg-3-24类基本上充当边距，然后将其折叠为移动屏幕的 1 列布局。

实际发生了什么

当我添加pure-u-1到下面的类（在大型桌面大小的浏览器宽度中）时，所有 html 内容都落入一列。如果我将pure-u-1其全部删除，则它们会一起折叠并且文本彼此重叠，使其无法阅读。为什么是这样？让它响应式行为的出发点是什么？我认为PureCSS允许嵌套网格。

SASS

#layout {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e1e1e1;

  .pure-g {

    h1 {
      font-family: Georgia, serif;
      a {
        text-decoration: none;
        color: #990000;
      }
    }

    h2 {
      font-size: 1em;
      font-weight: normal;
    }
    mark {
      color: #990000;
      background: none;
      font-weight: 700;
    }

  }

}

ul.languages {
  list-style-type: none; 

  li.active {
    font-weight: 700;

    a {
      color: #666;
    }
  }

  li {
    display: inline;
  }

}

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
 :
<header id="layout" class="pure-g">
  <div class="pure-u-1 pure-u-lg-3-24">&nbsp;</div>
  <div class="pure-u-1 pure-u-lg-18-24">

    <div class="pure-g">
      <div class="pure-u-1 pure-u-lg-12-24">
        <h1><a href="/">Trial Dates</a></h1>
      </div>
      <div class="pure-u-1 pure-u-lg-12-24">
        <p>Contact us at <mark>(800) 800-COLLECT</mark></p>
      </div>
    </div>
    <div class="pure-g">
      <div class="pure-u-1 pure-u-lg-12-24">
        <h2>Tagline</h2>
      </div>
      <div class="pure-u-1 pure-u-lg-12-24">
        <ul class="languages">
          <li class="active">
            <a href="#">English</a>
          </li>
          <li>
            <a href="#">Español</a>
          </li>
          <li>
            <a href="#">漢語</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
  <div class="pure-u-1 pure-u-lg-3-24">&nbsp;</div>
</header>
4

1 回答 1

2

事实证明，根据文档的一部分，除了核心纯 ​​css 之外，您还需要添加以下内容：

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
于 2015-04-24T01:52:54.833 回答