Pure.CSS响应式设计示例响应式设计|Pure.CSS

Pure.CSS使用以下类创建响应式设计。

Index	Class Name	Description
1)	.pure-u-*	它用于设置容器以占用任何设备上的所需空间(所有设备兼容)。
2)	.pure-u-sm- *	它用于小屏幕。它将容器设置为在宽度为？的设备上占据所需空间。 568px。
3)	.pure-u-md- *	它用于中型屏幕。它将容器设置为在宽度为？的设备上占据所需空间。 768像素。
4)	.pure-u-lg- *	它用于大屏幕。它将容器设置为在宽度为？的设备上占据所需空间。 1024px。
5)	.pure-u-xl-*	用于超大屏幕。它将容器设置为在宽度为？的设备上占据所需空间。 1280像素。

例子让我们创建一个包含四列的响应式网格。列应堆叠在小屏幕上, 应占据宽度：在中型屏幕上占50％, 在宽屏幕上应占占25％。
对于小屏幕, 我们添加：.pure-u-1类
对于中型屏幕, 我们添加：.pure-u-md-1-2
对于大尺寸屏幕：.pure-u-lg-1-4
请参阅以下示例：

< html> < head> < title> The PURE.CSS Containers< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> < 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 red; } < /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>

立即测试
看起来像这样：
【Pure.CSS响应式设计示例】输出