随着移动设备的普及和多样化，响应式 Web 设计已经成为前端开发中的必要技能。而在移动设备屏幕尺寸的适配过程中，CSS3 弹性布局（Flexible Box Layout）是常用的一种方法。
然而，在实际开发中，不同设备的屏幕尺寸多种多样，如何快速适配屏幕布局就需要一个适配工具，而 flexiblejs 就是一个不错的选择。
flexiblejs 简介
flexiblejs 是一个基于 rem 单位的前端适配工具，能够按照屏幕尺寸自动调整页面元素大小，使得页面在不同屏幕上看起来相对协调美观。
安装
使用 flexiblejs 需要通过 npm 安装，输入以下命令即可：
npm install flexiblejs --save
使用方法
引入
在项目的入口文件中，一般是 index.html 或者 main.js 中直接引入 flexible.js 即可：
<script src="./node_modules/flexiblejs/lib/flexible.js"></script>
或者在 main.js 中引入：
import 'flexiblejs';
设置 root font-size
在使用 flexiblejs 时，需要设置一个基准字体大小（root font-size），然后通过这个字体大小来计算各元素的大小。在 flexible.js 中，默认基准字体大小为 12px，可以通过以下方式进行设置：
Flexible.rem = 18;
这里我们将其设置为 18px，以便更好地展示效果。
样式设置
设置样式时，可以使用 rem 作为单位，flexiblejs 会根据 root font-size 自动计算出对应的像素值：
.my-class {
font-size: 1.2rem;
padding: 0.5rem;
border: 0.2rem solid #333;
}设计稿与屏幕的转换
在设计稿中，通常以 px 为单位，而在实际页面中应该使用 rem 为单位。如果我们设置的基准字体大小为 18px，那么在设计稿中使用 36px 的尺寸，在 CSS 中应该使用 2rem。
viewport 设置
如果 viewport 的宽度不是以手机设备宽度为准，而是固定的，需要手动设置 viewport 的宽度。可以在页面 head 中的 meta 标签设置如下：
<meta name="viewport" content="width=640, user-scalable=no">
其中 width 表示 viewport 的宽度。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- --------------------------------------------------------------
----------------- ------------
------- ---------------------------------------------------------
-------
---- -
------- --
-------- --
-
---------- -
------ -----
------- -----
----------- -------
-
-- -
---------- -------
------------ -------
----------- -----
-------------- -----
-
- -
---------- -----
------------ -------
-------------- -------
-
---- -
-------- -------------
------ -----
------- -----
------------- -------
----------------- -----
------ -----
---------- -------
------------ -----
-------------- -------
----------- -------
------- --------
-
---------- -
----------------- -----
-
--------
-------
------
---- ------------------
-------------- ---------
------- -- - ---- --- ---------------
-------- --- ------ ----- -- ---- -- ----------
------- ----------- ---------------------- -----------------------------
------
-------
-------总结
本文介绍了 flexiblejs 的使用方法，并给出了详细示例代码。flexiblejs 不仅能够快速适配不同尺寸的屏幕，还能解决 rem 单位与 px 单位之间的转换问题。通过学习本文，相信大家已经掌握了如何使用 flexiblejs 实现响应式 Web 设计的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a381e8991b448dfd63