什么是 Pure.CSS

2024 年 8 月 29 日 | 阅读 2 分钟

Pure.CSS 是一个 CSS 框架。它是一组小的、响应式的 CSS 模块集合,可用于任何 Web 应用程序。它用于创建更快、更美观和响应式的网站。它可以作为 Bootstrap 的替代品。

Pure.CSS 由 Yahoo 开发。

Pure.CSS 由以下模块组成

  • 基础
  • 网格
  • 形式
  • 按钮
  • 菜单

Pure 基于 Normalize.css,这是一个库,可以更一致地呈现元素,并与现代标准保持一致,并且可以在旧浏览器中使用。


Pure.CSS 的重要特性

  • 它是一组小的响应式 CSS 模块的集合。
  • 免费使用。
  • 高级 SEO 优化。
  • 非常容易使用。您可以直接使用它,无需安装。
  • 它具有内置的响应式设计。
  • 它是一个标准的 CSS,占用空间最小。这意味着它非常小。整个模块集经过缩小和 gzip 压缩后,占用空间为 4.0KB*。
  • Pure.CSS 包含几个预构建的通用元素,例如网格、表单、按钮、表格、分页器和 CSS 下拉菜单。
  • Pure.CSS 支持阴影和粗体颜色。颜色和阴影在各种平台和设备上保持一致。

响应式设计

Pure.CSS 具有内置的响应式功能。它的创建方式使其可以根据设备尺寸重新设计自身。它内部具有 12 列移动优先的流式网格,支持小型、大型和中型屏幕尺寸的响应式类。因此,使用 Pure 的网站与 PC、平板电脑和移动设备完全兼容。

CSS 媒体查询应用类名
总是.pure-u-*
sm@media screen and (min-width: 35.5em)? 568px.pure-u-sm-*
md@media screen and (min-width: 48em)? 768px.pure-u-md-*
lg@media screen and (min-width: 64em)? 1024px.pure-u-lg-*
xl@media screen and (min-width: 80em)? 1280px.pure-u-xl-*

标准 CSS

Pure.CSS 非常容易学习,因为它使用标准的 CSS。它不依赖于任何外部 JavaScript 库,例如 jQuery。

最小尺寸

Pure.CSS 具有非常小巧和扁平的设计。它非常小,整个模块集可以在 4.0 KB 内进行缩小和压缩。它的设计方式是用户可以轻松添加新的 CSS 规则,而不是覆盖现有的 CSS 规则。

您可以通过添加几行 CSS 来轻松自定义您的项目。


下一个主题如何使用 Pure CSS