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

结果

验证结果。