📌  相关文章
📜  Pure.CSS-响应式设计(1)

📅  最后修改于: 2023-12-03 15:03:53.503000             🧑  作者: Mango

Pure.css - 响应式设计

Pure.css是一个极简主义的CSS框架，它由Yahoo开发，并在2014年发布。它专注于提供响应式设计，并在尽可能少的代码中提供高效的布局和样式。

Pure.css不包括任何JavaScript代码，这使得其大小更小，加载速度更快，使得你可以通过自己的脚本来定制和增强Pure.css。

特点

  1. 响应式设计 - Pure.css提供了适用于平板电脑、笔记本电脑和移动设备的Grid选项，并通过使用CSS媒体查询来实现适应性。

  2. 独立CSS文件 - Pure.css不需要任何其他框架或库就可以运行，只需将其引入您的HTML文件即可。

  3. 低代码 - 在Pure.css中使用的CSS代码很少，这使得您可以更快地加载您的网站或应用程序。

  4. 快速启动 - 可以使用Pure.css提供的布局、表格、表单、导航栏、按钮、文字等作为基础来快速启动您的应用程序或网站。

  5. 可定制化 - Pure.css不会限制您的自定义选项。您可以编写自己的CSS并根据需要覆盖Pure.css。

例子

这里有一个标准的Pure.css模板例子：

<!DOCTYPE html>
<html>
<head>
    <title>Pure.css Example</title>
    <link rel="stylesheet" type="text/css" href="pure-min.css">
</head>
<body>
    <div class="pure-g">
        <div class="pure-u-1">
            <h1>Welcome to Pure.css</h1>
        </div>
    </div>
</body>
</html>

这会在整个页面上显示一个标题。为了让它看起来更好，您应该添加一些样式：

h1 {
    text-align: center;
    margin-top: 50px;
}

网格布局

Pure.css提供了一个块级网格系统，您可以在其中创建列和行。

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        Column 1
    </div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        Column 2
    </div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        Column 3
    </div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        Column 4
    </div>
</div>

这会在页面上创建4个基本列，它们将在较小的屏幕上堆叠。

表单

Pure.css还提供了易于使用的表单布局。

<form class="pure-form">
    <fieldset>
        <legend>Form Title</legend>

        <label for="name">Name</label>
        <input id="name" type="text" placeholder="Your Name">

        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Your Email">

        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Your Password">

        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
</form>

按钮

Pure.css的按钮和使用方法都很简单。

<button class="pure-button">Button</button>
<button class="pure-button-primary">Primary Button</button>
<button class="pure-button-disabled" disabled>Disabled Button</button>
总结

Pure.css是一个轻量级的、易于使用的CSS框架。它提供了易于使用的网格布局、表单布局、按钮、Typography等，使您快速启动您的应用程序或网站，并且可以不影响您的自定义选项。由于Pure.css专注于响应式设计，因此它可以确保您的应用程序或网站在不同的设备上都具有良好的用户体验。