0

2 つの隣接するボックスを含む 1 つの列を持つレスポンシブ グリッドを作成しようとしています。左側に 1/3 列、右側に 2/3 列。http://codepen.io/htmlcheats/pen/OWMobOの codepen の非応答バージョンは次のとおりです。

<div class="pure-g">
    <div class="pure-u-1-3" style="background-color: red; height: 10em;">
        Box 1 - 33.3% width uses pure-1-3 style
    </div><!-- .pure-u-1-3 -->
    <div class="pure-u-2-3" style="background-color: teal; height: 10em;">
        Box 2 - 66.6% width uses pure-2-3 style
    </div><!-- .pure-u-2-3 -->      
</div><!-- .pure-g -->

期待どおりに動作します。それらを一緒につぶしたり伸ばしたりすると、それらは隣接したままになります。

応答バージョンは次のとおりです ( http://codepen.io/htmlcheats/pen/OWMobOの codepen ):

<div class="pure-g">    
    <div class="pure-sm-md-1-3 pure-u-md-1-3 pure-u-lg-1-3 pure-u-1" style="background-color: red; height: 10em;">
        Box 1 - 33.3% width uses pure-1-3 style
    </div><!-- .pure-u-1-3 -->
    <div class="pure-sm-md-2-3 pure-u-md-2-3 pure-u-lg-2-3 pure-u-1" style="background-color: teal; height: 10em;">
        Box 2 - 66.6% width uses pure-2-3 style
    </div><!-- .pure-u-2-3 -->  
</div><!-- .pure-g -->

ページを押しつぶしても、それらは互いに重なり合ったままです。私が正しく理解していれば、それらは折りたたまれて、赤いボックスがティールのボックスの上に立つ単一の列を作成するはずです。

私が間違っていることを教えてもらえますか？

4

1 に答える 1

1

あなたの質問にある 2 つの codepen リンク (応答しないものと応答するもの) は同じです。どちらも応答しないバージョンの例にリンクしていますが、応答性の高い例であると思われるものを見つけました。

とにかく、purecss でレスポンシブ グリッドを有効にするには、別のレスポンシブ グリッド CSS ファイルと基本の purecss ファイルを含める必要があります。レスポンシブ グリッドのドキュメントから:

メディア クエリは上書きできないため、pure.css の一部としてグリッド システムを含めません。別の CSS ファイルとして取り込む必要があります。これを行うには、ページに次のタグを追加します。

<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<!--<![endif]-->

ペンのレスポンシブ バージョンを取得し、レスポンシブ CSS ファイル (上記のコード ブロック) へのリンクを追加したところ、期待どおりに動作しました。最終的に、CSS リンクは次のようになります。

<!-- base purecss file -->
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">

<!-- purecss responsive grids -->
<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<!--<![endif]-->
于 2017-01-12T18:38:49.003 に答える