Pure.CSS - Thiết kế đáp ứng

Pure.CSS có một số lớp đặc biệt để tạo ra một thiết kế đáp ứng.

Sr.No. Tên & Mô tả Lớp học
1

.pure-u-*

Đặt vùng chứa để chiếm không gian cần thiết trên bất kỳ thiết bị nào.

2

.pure-u-sm-*

Đặt vùng chứa để chiếm không gian cần thiết trên thiết bị có chiều rộng ≥ 568px.

3

.pure-u-md-*

Đặt vùng chứa để chiếm không gian cần thiết trên thiết bị có chiều rộng ≥ 768px.

4

.pure-u-lg-*

Đặt vùng chứa để chiếm không gian cần thiết trên thiết bị có chiều rộng ≥ 1024px.

5

.pure-u-xl-*

Đặt vùng chứa để chiếm không gian cần thiết trên thiết bị có chiều rộng ≥ 1280px.

Trong ví dụ sau, chúng ta sẽ tạo một lưới đáp ứng với một hàng có bốn cột. Các cột nên xếp chồng trên màn hình nhỏ, chiếm chiều rộng: 50% trên màn hình cỡ trung bình và nên chiếm chiều rộng: 25% trên màn hình lớn.

Điều này được thực hiện bằng cách thêm .pure-u-1 lớp cho màn hình nhỏ, .pure-u-md-1-2 cho màn hình cỡ trung bình và .pure-u-lg-1-4cho màn hình lớn. Thay đổi kích thước trang để xem phản hồi của lưới đối với kích thước màn hình.

Thí dụ

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

Kết quả

Xác minh kết quả.