Pure.CSS響應(yīng)式設(shè)計

PURE.CSS有幾個特殊的類來創(chuàng)建一個響應(yīng)式設(shè)計。

在下面的例子中，我們將創(chuàng)建一個帶有四列的行的響應(yīng)式網(wǎng)格。 柱子應(yīng)該堆疊在小屏幕上，在中型屏幕上應(yīng)占據(jù)寬度：50％，在大屏幕上應(yīng)占據(jù)寬度：25％。

這是通過為小屏幕添加.pure-u-1類，為中型屏幕添加.pure-u-md-1-2，為大屏幕添加.pure-u-lg-1-4。 調(diào)整頁面大小以查看網(wǎng)格響應(yīng)屏幕大小。

例

purecss_responsive_design.htm

   

  <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>

結(jié)果

驗(yàn)證結(jié)果。