在前端开发中，响应式设计是我们经常需要考虑的问题。而且随着移动设备的盛行，对于不同大小的设备都需要适配。在实现响应式设计的过程中，flexible-css 库可以帮助我们更快速便捷地完成工作。
什么是 flexible-css？
flexible-css 是一种使用了 rem 布局技术的前端库。尤其是在移动端的响应式设计中，rem 布局技术相当常用。flexible-css 简单易用，可以实现在不同尺寸屏幕上的自适应设计。
如何使用 flexible-css？
安装
首先需要在终端中使用以下命令安装 flexible-css:
npm install flexible-css --save
实现
引入 flexible.css
在 HTML 的 head 标签中引入以下的链接：
<link rel="stylesheet" href="flexible.css">
然后你的 rem 布局系统便就准备好了。
使用
在实现 responsive 的过程中，通常会使用 media queries。
比如说，我们希望在可视窗口的宽度 500px 以下时，字体大小为 14px；在宽度在 501px 到 1000px 之间时设置字体大小为 16px；在宽度 1000px 以上时，字体大小为 18px。我们可以这样写样式：
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
------ ------ --- ----------- ------ --- ----------- ------- -
---- -
---------- -----
-
-
------ ------ --- ----------- ------- -
---- -
---------- -----
-
-然后，我们将 rem 布局写入我们的 CSS 中：
-- -------------------- ---- -------
---- -
---------- ------ ------- ------ ---------------------
-
---- -
---------- ------- -- ------------ --
-
------ ------ --- ----------- ------ --- ----------- ------- -
---- -
---------- ------- -- ---------- ---------------- --
-
---- -
---------- ------- -- ------------ --
-
-
------ ------ --- ----------- ------- -
---- -
---------- ---- -- ------------- --
-
---- -
---------- ------- -- ------------ --
-
-如果你已经安装好了 flexible-css，直接使用以下链接引入它：
<link rel="stylesheet" href="node_modules/flexible-css/dist/flexible.min.css">
当然，你也可以将科学计算写至你 CSS 中：
html {
width: 100%;
font-size: calc(12px + (24 - 12) * ((100vw - 320px) / (750 - 320)));
}此外，还有其他的一些 rem 工具库，例如 rem.js 和 amfe-flexible。它们的用处差不多，因此你可以根据个人的喜好来选择使用哪个。
总结
使用 flexible-css 相当简单，安装和使用都非常方便，而且使用了 flexible-css 后，能够让开发者更快速便捷地完成移动设备的响应式设计。同时，掌握 rem 布局技术，能够让开发工作更加简单，同时也能够更好地保证网页在不同的设备上都可以很好地显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608981e8991b448debd0