在今天这个多终端、多分辨率的时代，设计师需要让设计出的网页或 APP 页面能够适配全屏幕设备，这时就需要使用响应式布局技术。为了方便开发者做到自适应布局，AMFE 团队推出了一个 npm 包 amfe-flexible。本文将详细介绍如何使用 amfe-flexible 进行响应式布局。
1. 什么是 amfe-flexible？
amfe-flexible 是一个用于 PC 和移动端的弹性布局解决方案，它可以根据不同设备、不同分辨率计算出应该使用的 HTML 字体大小，从而实现自适应。
2. 安装 amfe-flexible
第一步，需要在项目中使用 npm install 命令安装 amfe-flexible。
npm install amfe-flexible --save
第二步，将 amfe-flexible 引入到项目中。推荐在项目入口文件中引入：
import 'amfe-flexible';
3. 使用示例
在项目入口文件中引入 amfe-flexible 后，在 HTML 文件中就可以直接使用 rem 来布局页面。对于多数浏览器来说，1rem 约等于16px，所以我们可以针对设计稿的尺寸来设置 HTML 根节点的字体大小，从而实现自适应布局。
例如，为了让页面适配 iPhone 6 设备，我们在样式文件中可以这样定义：
html {
font-size: 37.5%;
}上述代码中的 37.5% 得出的值是 6px，这样就可以实现在 iPhone 6 上的自适应布局。
4. 注意事项
amfe-flexible 使用 rem 实现自适应布局，但是在部分移动端浏览器中，根据系统设置或用户设置，字体大小不一，这时候就需要注意页面样式失效的情况。解决方法如下：
-- -------------------- ---- -------
---- -
---------- ------
-
------ ---- ------ --- ----------- ------ -
---- -
---------- --------
-
-
------ ---- ------ --- ----------- ------ -
---- -
---------- ----------
-
-
------ ---- ------ --- ----------- ------- -
---- -
---------- ------
-
-
上述代码中，针对不同分辨率设备，我们分别设置不同的 HTML 根节点字体大小，从而实现自适应布局。这种方式可以在大多数移动端浏览器中有效。
总结
amfe-flexible 是一款方便实用的用于 PC 和移动端的弹性布局解决方案，适用于不同尺寸的设备屏幕。所以，在开发中使用 amfe-flexible 可以增加项目的可移植性、兼容性和稳定性，使页面展现更加优美。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c4681e8991b448e5caa