了解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>