📌  相关文章
📜  Pure.CSS-响应式设计

📅  最后修改于: 2020-10-21 05:52:36             🧑  作者: Mango

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

Sr.No. Class Name & Description
1

.pure-u-*

Sets the container to occupy required space on any device.
2

.pure-u-sm-*

Sets the container to occupy required space on a device with width ≥ 568px.
3

.pure-u-md-*

Sets the container to occupy required space on a device with width ≥ 768px.
4

.pure-u-lg-*

Sets the container to occupy required space on a device with width ≥ 1024px.
5

.pure-u-xl-*

Sets the container to occupy required space on a device with width ≥ 1280px.

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

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

例

purecss_sensitive_design.htm

现场演示
The PURE.CSS Containers
      
      
      

      
   
    
   
      
             
         

            

               

                  
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.

               

            

            
            

               

                  
First Column

               

            

            
            

               

                  
Second Column

               

            

            
            

               

                  
Third Column

               

            

            
            

               

                  
Fourth Column

               

            

         

      

      
      

         

            

               

                   
This column is to occupy the complete space of a row.

               

            

         

      

      
      

         

            

               

                  
This column is to occupy the two-fifth of the space of a row.

               

            

         

      

      
      

         

            

               

                  
This column is to occupy the three-fifth of the space of a row.

               

            

         

      
   
      
      

         

            

               

                  
Column 1: This column is to occupy the one-third of the
                  space of a row on all devices.

               

            

            
            

               

                  
Column 2: This column is to occupy the one-third of the space 
                     of a row on all devices.

               

            

            
            

               

                  
Column 3: This column is to occupy the one-third of the space of a 
                     row on all devices.

结果

验证结果。