Pure.CSS有几个特殊的类来创建响应式设计.
Sr .No. | 类名&描述 |
---|---|
1 | .pure -u - * 将容器设置为占用任何设备上的所需空间. |
2 | .pure-u-sm - * 将容器设置为占用宽度为&ge的设备上所需的空间; 568px. |
3 | .pure-u-md - * 将容器设置为占用宽度较大的设备上的所需空间≥ 768px. |
4 | .pure-u-lg - * 将容器设置为占用设备上所需空间的宽度≥ 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
<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>
验证结果.