Question

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

我想做的事

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

实际发生的事情

当我在下面的类中添加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>

Answer 1

事实证明，根据documentation的一部分，除了核心纯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]-->

为什么这不响应？

1 个答案: