自适应CSS模块，Pure.css让Web样式更加灵活

liuian 2025-01-02 17:46 65 浏览

介绍

Pure.css是一组小型的自适应CSS模块，可以在每个Web项目中使用。Pure以Normalize.css为基础，并提供native HTML元素以及最常见的UI组件的布局和样式，考虑到移动设备，Pure具有开箱即用的响应能力，因此元素在所有屏幕尺寸上都看起来不错。

<link rel="stylesheet" href="./pure-min.css"  />

PS：Normalize.css使浏览器更一致地渲染所有元素，并符合现代标准。它只针对需要规范化的样式。

Github

https://github.com/pure-css/pure

兼容性

IE 8+

Latest Stable: Firefox, Chrome, Safari

iOS 6-8

Android 4.4+

布局

通过使用Grid，Menu等，可以轻松创建适用于所有屏幕尺寸的精美响应式布局。

Pure的设计目标是可以在每个Web项目中使用它

定制化

与其他框架不同，Pure的设计不受限制，最小且扁平。添加新的CSS规则比覆盖现有规则要容易得多。通过添加几行CSS，可以自定义Pure的外观以与你的Web项目一起使用。

表单

以下创建默认的内联表单，将pure-form类名添加到任何<form>元素。如下

<form class="pure-form">
    <fieldset>
        <legend>A compact inline form</legend>

        <input type="email" placeholder="Email">
        <input type="password" placeholder="Password">

        <label for="remember">
            <input id="remember" type="checkbox"> Remember me
        </label>

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

还有其他常见类型表单，本文不过多介绍