如何理解纯 CSS 响应式设计?

cssweb developmentfront end technology更新于 2024/4/27 23:08:17

什么是 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>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 类名。

在输出中，用户可以观察到前两个 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

在下面的示例中，我们有一个 title 和 description 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 元素的尺寸。