Pure.CSS - 响应式设计

Pure.CSS响应式设计 - 从简单和简单的步骤学习Pure.CSS，从基本概念到高级概念，包括概述，环境设置，响应式设计，网格，表格，按钮，表格，图像，图标。

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

Sr .No.	类名&描述
1	.pure -u - * 将容器设置为占用任何设备上的所需空间.
2	.pure-u-sm - * 将容器设置为占用宽度为&ge的设备上所需的空间; 568px.
3	.pure-u-md - * 将容器设置为占用宽度较大的设备上的所需空间&GE; 768px.
4	.pure-u-lg - * 将容器设置为占用设备上所需空间的宽度&GE; 1024px.
5	.pure-u-xl - * 将容器设置为占用宽度为&ge的设备上所需的空间; 1280px.

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

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

示例

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

结果

验证结果.