Pure.CSS教程：响应式设计

Pure.CSS具有几个特殊的类来创建响应式设计。

序号	类名和描述
1	.pure-u- * 设置容器以占用任何设备上的所需空间。
2	.pure-u-sm- * 设置容器以占用宽度≥568px的设备上的所需空间。
3	.pure-u-md- * 设置容器以占用宽度≥768px的设备上的所需空间。
4	.pure-u-lg- * 设置容器以占用宽度≥1024px的设备上的所需空间。
5	.pure-u-xl- * 设置容器以占用宽度≥1280px的设备上的所需空间。

在下面的示例中，我们将创建一个具有四列的行的响应式网格。列应堆叠在小屏幕上，应占据宽度：在中型屏幕上占50％，在宽屏幕上应占占25％。

这是通过为小屏幕添加.pure-u-1类，为中型屏幕添加.pure-u- md-1-2和为大屏幕添加.pure-u-lg-1-4来完成的。调整页面大小以查看网格对屏幕尺寸的响应。

例子

purecss_sensitive_design.htm

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

terry

这个人很懒，什么都没有留下～