Pure.CSS 响应式设计

2025年3月17日 | 阅读 3 分钟

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

索引	类名	描述
1)	.pure-u-*	它用于设置容器在任何设备上占据所需的空间（兼容所有设备）。
2)	.pure-u-sm-*	它用于小屏幕。它将容器设置为在宽度 ? 568px 的设备上占据所需的空间。
3)	.pure-u-md-*	它用于中等屏幕。它将容器设置为在宽度 ? 768px 的设备上占据所需的空间。
4)	.pure-u-lg-*	它用于大屏幕。它将容器设置为在宽度 ? 1024px 的设备上占据所需的空间。
5)	.pure-u-xl-*	它用于超大屏幕。它将容器设置为在宽度 ? 1280px 的设备上占据所需的空间。

示例

让我们创建一个具有四列的响应式网格。列应该在小屏幕上堆叠，在中等大小的屏幕上应占用宽度：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" 
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 按钮

Pure.CSS 响应式设计

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

PureCSS 教程

Pure.CSS 输入框

Pure.CSS 表单

Pure.CSS 表格

面试题

Pure.CSS 响应式设计

示例

相关帖子

Pure.CSS 网格

Pure.CSS 图标

Pure.CSS 菜单

Pure.CSS 图片

Pure.CSS 下拉菜单

Pure.CSS 按钮

PureCSS 教程

如何使用 Pure.CSS

什么是 Pure.CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器