极客教程了解Pure CSS响应式设计？
什么是Pure.CSS？
Pure.CSS是一个CSS框架，允许开发人员创建响应式的网页设计。它包含各种预定义的类，使网页变得响应式。此外，它还包含预定义的网格、表单、表格、图像、图标、按钮等样式。
它为开发人员轻松创建响应式的网页。
什么是响应式网页设计？
在开始响应式网页设计之前，可以在桌面、移动和平板设备上打开TutorialsPoint.com网站。在不同的设备上，用户可以观察到它的外观良好。
因此，响应式网页设计意味着网页可以适应任何尺寸的设备。网页的任何内容都不应该溢出或被其他页面的内容覆盖。
使用Pure.CSS比普通CSS有什么好处？
使用pure.css与普通CSS相比，有很多好处，我们在这里阐述。
- 精简的pure.CSS的大小非常紧凑，仅为4 kb。
-
由于体积小，pure.css更快，易于管理。
-
它包含一些预定义的表格、表单、按钮、图像、图标、网格等样式。
-
它基于12网格布局样式网页。
-
它有预定义的类名，可使HTML元素响应媒体查询。
Pure.CSS的类表格
Pure.CSS包含我们通过表格格式解释的媒体查询的类名。
| 键 | 媒体查询 | 类名 |
|---|---|---|
| none | none | pure-u-* |
| sm | @media screen and (min-width: 568px) | pure-u-sm-* |
| md | @media screen and (min-width: 768px) | pure-u-md-* |
| lg | @media screen and (min-width: 1024px) | pure-u-lg-* |
| xl | @media screen and (min-width: 1280px) | pure-u-xl* |
在上表格中，我们有pure.css的不同类名。如果用户想要在较大的屏幕上使用屏幕的一半部分，则应使用’pure-u-lg-1-2’作为类名。同样，用户应使用“pure-u-lg-1-3”作为类名来使用屏幕的三分之一。
我们将通过下面的示例了解如何使用pure.css类来创建响应式网页。
示例1
在下面的示例中，我们创建了四个div元素。我们给第一个div元素赋予“pure-u-1-1”类名，它将始终占据100%的屏幕宽度空间。第二和第三个div包含“pure-u-1-3”类名，它们将占据屏幕宽度的三分之一。最后一个div包含“pure-u-1-4”类名，它将占据屏幕宽度的四分之一。
<html>
<head>
<link rel = "stylesheet" href = "https://unpkg.com/purecss@2.0.3/build/pure-min.css">
<link rel = "stylesheet" href = "https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">
<style>
.pure-g [class *="pure-u"] {
background-color: aqua;
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h2>使用 <i> pure.CSS </i> 创建一个响应式的网页设计。</h2>
<div class = "pure-g">
<div class = "pure-u-1-1"> 这是第一行。 </div>
<div class = "pure-u-1-3"> 这是第二行和第一列。 </div>
<div class = "pure-u-1-3"> 这是第二行和第二列。 </div>
<div class = "pure-u-1-4"> 这是第二行和第三列。 </div>
</div>
</body>
</html>
示例 2
在下面的示例中，我们创建了多个 HTML div 元素，并为它们分配了不同的 pure.CSS 类名。
在输出中，用户可以观察到前两个 div 元素占据了屏幕的三分之一，第三个 div 总是占据了屏幕的四分之一。第四个 div 则总是占据了整个屏幕宽度。
第五个 div 占据了屏幕的五分之一，第六个 div 占据了 div 的三分之一，最后一个 div 占据了屏幕的六分之一。
<html>
<head>
<link rel = "stylesheet" href = "https://unpkg.com/purecss@2.0.3/build/pure-min.css">
<link rel = "stylesheet" href = "https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">
<style>
.pure-g [class *="pure-u"] {
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
text-align: center;
}
.pure-u-1-3 { background-color: #e65a5a; border: 2px dotted yellow;}
.pure-u-1-4 { background-color: #5a5ae6; border: 2px solid green;}
.pure-u-1-5 { background-color: #5ae65a; border: 2px solid red;}
.pure-u-1-6 { background-color: #e6e65a; border: 2px solid blue;}
.pure-u-1-1 { background-color: #5a5ae6; border: 2px solid green; }
</style>
</head>
<body>
<h2>使用 <i> pure.CSS </i> 创建响应式网页设计</h2>
<div class = "pure-g">
<div class = "pure-u-1-3"> TypeScript </div>
<div class = "pure-u-1-3"> HTML </div>
<div class = "pure-u-1-4"> CSS </div>
<div class = "pure-u-1-1"> JavaScript </div>
<div class = "pure-u-1-5"> Pure.CSS </div>
<div class = "pure-u-1-3"> Github </div>
<div class = "pure-u-1-6"> Python </div>
</div>
</body>
</html>
示例 3
在下面的示例中，我们有一个标题和描述 div 元素。我们根据屏幕大小更改 div 元素的尺寸。对于小屏幕，它会占据整个屏幕宽度，对于中等屏幕，它会占据一半的宽度。此外，它会占据大屏幕的三分之一宽度。
<html>
<head>
<link rel = "stylesheet" href = "https://unpkg.com/purecss@2.0.3/build/pure-min.css">
<link rel = "stylesheet" href = "https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">
<style>
.header { background-color: #333; color: #fff; padding: 10px; }
.container { max-width: 960px; margin: 0 auto; padding: 0 10px;}
.content { margin: 20px 0; padding: 10px; border: 1px solid #ccc;}
</style>
</head>
<body>
<div class = "pure-g">
<div class = "pure-u-sm-1-1 pure-u-md-1-2 pure-u-lg-1-3">
<div class="header">
<h1> 使用 <i> Pure.CSS </i> 创建响应式网页设计。 </h1>
</div>
</div>
</div>
<div class = "pure-g">
<div class = "pure-u-sm-1-1 pure-u-md-1-2 pure-u-lg-1-3">
<div class = "container">
<div class = "content">
<p> Pure.CSS 是一款轻量级且响应式的 CSS 框架，提供一组 CSS 模块，可以快速创建网页。它旨在极简和灵活，允许开发人员轻松自定义样式和布局以满足其需求。 Pure.CSS 提供响应式的网格系统、排版样式、表单、按钮、表格和菜单等功能。 </p>
</div>
</div>
</div>
</div>
</body>
</html>
用户学习了如何使用 pure.CSS 创建响应式网页设计。在前两个示例中，我们根据屏幕大小具有固定的 div 元素尺寸。在最后一个示例中，我们使用 pure.css 的类根据屏幕大小更改 div 元素的尺寸。