介绍
fluidui-css 是一个基于 CSS3 实现的响应式布局库，它提供了许多 CSS 类和 mixin，可以帮助我们快速地创建出响应式的 web 页面。
fluidui-css 已经发布到 npm 上，可以通过 npm 安装和使用。本文将介绍 npm 包 fluidui-css 的使用方法，包括安装、使用和示例代码。
安装
在使用 fluidui-css 前，我们需要先安装它。可以使用 npm 或者 yarn 安装，这里以 npm 为例：
npm install fluidui-css --save
这条命令会将 fluidui-css 安装到项目中，并将它添加到依赖项中。
使用
在安装完成后，就可以在你的项目中使用 fluidui-css 了。使用 fluidui-css 可以通过以下方式：
1. 使用 CSS 类
fluidui-css 提供了许多 CSS 类，可以使用这些分类快速创建出响应式的页面。使用 CSS 类的方法非常简单，在 HTML 中加上对应的 CSS 类即可。
<div class="row"> <div class="col-sm-6 col-md-4">...</div> <div class="col-sm-6 col-md-4">...</div> <div class="col-sm-6 col-md-4">...</div> </div>
2. 使用 Mixin
如果你使用的 CSS 预处理器是 Sass，那么可以使用 fluidui-css 的 mixin。mixin 是一种将一个样式块转换为其他样式块的方式。fluidui-css 提供了许多 mixin，可以让我们更加灵活地定义响应式布局。
// 引入 fluidui-css
@import 'node_modules/fluidui-css/fluidui';
// 使用 col() mixin
.my-class {
@include col(6); // 将该元素设置为一半屏幕宽度
}以上代码会将 .my-class 元素设置为一半屏幕宽度，在不同屏幕尺寸下，它的宽度也会有所不同。
示例
下面是一个使用 fluidui-css 创建响应式布局的例子：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ----------
---- -- ----------- ---
----- ---------------- ------------------------------------------------
-------
----- -
-------- -----
----------------- ------
------- --- ----- -----
-------------- ----
-------------- -----
-
------------ -
------------ -----
-------------- -----
-
--------
-------
------
---- ------------------
---- ------------
---- --------------- ----------
---- -------------
---- ------------------------ -------
----------------
------
------
---- --------------- ----------
---- -------------
---- ------------------------ -------
----------------
------
------
---- --------------- ----------
---- -------------
---- ------------------------ -------
----------------
------
------
------
------
-------
-------在以上例子中，我们通过引入 fluidui-css 使用了它提供的 .container、.row、.col-* 等类来创建了一个响应式布局网格系统。展示了卡片的布局效果，让人一目了然。
结语
使用 fluidui-css 可以帮助我们快速创建出响应式布局。它提供了丰富的 CSS 类和 mixin，让我们能够灵活定义布局。希望本文能对你有所帮助，也希望你喜欢 fluidui-css。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd881e8991b448e67bb