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

<html>
   <head>
      <title>The PURE.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;
         }

         .graybox {
            background: rgb(240, 240, 240);
            border: 1px solid #ddd;
         }
      </style>
   </head>
   <body>

      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-1">
               <div class = "graybox">
                  <p>These four columns should stack on small screens,
                  should take up width: 50% on medium-sized screens, and should
                  take up width: 25% on large screens.</p>
               </div>
            </div>

            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>First Column</p>
               </div>
            </div>

            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Second Column</p>
               </div>
            </div>

            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Third Column</p>
               </div>
            </div>

            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>Fourth Column</p>
               </div>
            </div>
         </div>
      </div>

      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1">
               <div class = "graybox">
                   <p>This column is to occupy the complete space of a row.</p>
               </div>
            </div>
         </div>
      </div>

      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-2-5">
               <div class = "graybox">
                  <p>This column is to occupy the two-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>

      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-3-5">
               <div class = "graybox">
                  <p>This column is to occupy the three-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>

      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 1: This column is to occupy the one-third of the
                  space of a row on all devices.</p>
               </div>
            </div>

            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 2: This column is to occupy the one-third of the space
                     of a row on all devices.</p>
               </div>
            </div>

            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 3: This column is to occupy the one-third of the space of a
                     row on all devices.</p>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

Purecss-responsive-design

Pure.CSS-レスポンシブデザイン

例

結果