了解纯CSS响应式设计

什么是Pure.CSS

Pure.CSS是一个CSS框架，允许开发者创建响应式网页设计。它包含了各种预定义的类来使网页具有响应式特性。此外，它还包含预定义的网格、表单、表格、图像、图标和按钮等。

它使开发者能够轻松地创建响应式网页。

什么是响应式网页设计

在开始响应式网页设计之前，将TutorialsPoint.com网站在桌面、移动和平板设备上打开。在这里，用户可以观察到它在不同设备上的外观都很好。

因此，响应式网页设计意味着网页应适应任何尺寸的设备。网页的任何内容都不应溢出或被其他页面内容覆盖。

使用Pure.CSS与普通CSS相比的好处是什么

使用Pure.CSS而不是普通CSS有很多好处，我们在这里解释了一些。

压缩后的纯CSS文件非常紧凑，只有4KB。
由于其紧凑的大小，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>Using the <i> pure.CSS </i> to create a responsive web design.</h2>
   <div class = "pure-g">
      <div class = "pure-u-1-1"> This is the first row. </div>
      <div class = "pure-u-1-3"> This is the second row and the first column. </div>
      <div class = "pure-u-1-3"> This is a second row and second column. </div>
      <div class = "pure-u-1-4"> This is a second row and second column. </div>
   </div>
</body>
</html>

示例2

在下面的示例中，我们创建了多个HTML div元素，并为它们分别指定了pure.CSS的不同class名称。

在输出中，用户可以观察到前两个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>Using the <i> pure.CSS </i> to create a responsive web design</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> Using the <i> Pure.CSS </i> to create a responsive web design. </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 is a lightweight and responsive CSS framework that provides a set of CSS modules to
               quickly create web pages.
               It is designed to be minimalistic and flexible, allowing developers to easily customize the
               styles and layout to meet their needs.
               Pure.css offers a responsive grid system, typography styles, forms, buttons, tables, and menus,
               among other features. </p>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

用户学会了使用pure.CSS来创建响应式网页设计。在前两个示例中，我们根据屏幕尺寸设置了div元素的固定尺寸。而在最后一个示例中，我们使用pure.css的类根据屏幕尺寸改变了div元素的尺寸。