Purecss-responsive-design
提供:Dev Guides
Pure.CSS-レスポンシブデザイン
Pure.CSSには、レスポンシブデザインを作成するためのいくつかの特別なクラスがあります。
Sr.No. | Class Name & Description |
---|---|
1 |
.pure-u-* 任意のデバイスで必要なスペースを占有するようにコンテナを設定します。 |
2 |
.pure-u-sm-* 幅568px以上のデバイスで必要なスペースを占有するようにコンテナを設定します。 |
3 |
.pure-u-md-* 幅≥768pxのデバイスで必要なスペースを占有するようにコンテナーを設定します。 |
4 |
.pure-u-lg-* 幅が1024px以上のデバイスで必要なスペースを占有するようにコンテナを設定します。 |
5 |
.pure-u-xl-* 幅が1280px以上のデバイスで必要なスペースを占有するようにコンテナを設定します。 |
次の例では、4つの列を持つ行を持つレスポンシブグリッドを作成します。 列は小さな画面でスタックし、幅を占める必要があります:中規模の画面で50%、幅が大きい画面で25%を占める必要があります。
これは、小さな画面用に .pure-u-1 クラス、中型画面用に .pure-u-md-1-2 、および大画面用に .pure-u-lg-1-4 を追加することにより行われます。 画面サイズに対するグリッドの応答を確認するには、ページのサイズを変更します。
例
purecss_sensitive_design
結果
結果を確認します。