以下のSASSとHTMLコードがあります。Yahoo の PureCSS を使用しています。
私がやろうとしていること
これを大きなデスクトップサイズの画面用に3列のレイアウトにし、pure-lg-3-24クラスが基本的にマージンとして機能するようにしてから、モバイル画面用の1列のレイアウトに折りたたもうとしています。
実際に何が起こるか
以下のクラスに (大きなデスクトップ サイズのブラウザー幅で)追加pure-u-1すると、すべての html コンテンツが 1 つの列に収まります。削除する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"> </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"> </div>
</header>