介绍
在移动端开发中，为了适应不同分辨率的手机以及不同屏幕的方向，我们需要使用自适应布局。flexible.js 是一个非常优秀的 npm 包，它可以很好地帮助我们实现自适应布局。
安装
--- ------- ----------- ------
使用
在入口文件中的 head 标签中引入 flexible.js：
------- --------------------------------------------------------------------------------------
或者使用 npm 包（前提是已经进行了安装）：
------ -------------
参数介绍
在使用 flexible.js 的过程中，我们可以自定义一些参数。
px2remRatio
设置 px 和 rem 的转换比率，默认为 1/100，即 1px = 0.01rem。
designWidth
设计稿的宽度，默认为 750px。
baseFontSize
设置基础字体大小，默认为 16px。
maxWidth
设置 HTML 最大宽度，默认为 540px。
resizeCallback
设置尺寸变化回调函数。
示例
在使用 flexible.js 的过程中，我们需要按照设计稿做布局。
以 iPhone6 为例，设计稿宽度为 750px。那么我们在 CSS 中设计样式时，应该以 iPhone6 为基准，即设置 html 的 font-size：
---- - ---------- ----- -
因为 iPhone6 的屏幕宽度为 375px，所以我们的设计稿像素应该以它的宽度为基准，即：
------------ - ---------- ----- ------ ------ ------- ------ -
如果我们在 UI 设计工具中将一个元素的宽度设置为 100px，那么在 CSS 中应该写成：
-------- - ------ ----- -- ----- - ---- - ---- -- -
注意事项
1. 不要在 img 标签中使用 width 和 height
在使用 flexible.js 的过程中，我们不应该再使用 img 标签中的 height 和 width 属性，而是应该使用 CSS 中的 width 和 height属性，例如：
---- - ------ ----- ------- ----- -
2. 不要在 body 上设置 padding 和 margin
在使用 flexible.js 的过程中，我们不应该在 body 上设置 padding 和 margin。如果我们真的需要设置 padding 和 margin，那么我们应该使用一个容器包裹 body，给容器设置 padding 和 margin。
3. 避免使用 min-width 和 max-width
在使用 flexible.js 的过程中，我们应该尽量避免使用 min-width 和 max-width，因为它们会导致布局出现问题。如果我们真的需要使用 min-width 和 max-width，那么我们应该根据不同屏幕分别设置样式。
总结
flexible.js 是一个非常实用的自适应布局工具，我们可以通过它来实现针对不同屏幕的自适应布局。在使用 flexible.js 的过程中，我们需要按照设计稿做布局，并且要注意一些细节问题，才能成功实现自适应布局。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005731781e8991b448e94b9