npm 包 flexible.js 使用教程

介绍

在移动端开发中，为了适应不同分辨率的手机以及不同屏幕的方向，我们需要使用自适应布局。flexible.js 是一个非常优秀的 npm 包，它可以很好地帮助我们实现自适应布局。

安装

npm install flexible.js --save

使用

在入口文件中的 head 标签中引入 flexible.js：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

或者使用 npm 包（前提是已经进行了安装）：

import 'flexible.js'

参数介绍

在使用 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：

html {
  font-size: 50px;
}

因为 iPhone6 的屏幕宽度为 375px，所以我们的设计稿像素应该以它的宽度为基准，即：

.page-header {
  font-size: 30px;
  width: 375px;
  height: 200px;
}

如果我们在 UI 设计工具中将一个元素的宽度设置为 100px，那么在 CSS 中应该写成：

.element {
  width: 2rem; /* 100px / 50px = 2rem */
}

注意事项

1. 不要在 img 标签中使用 width 和 height

在使用 flexible.js 的过程中，我们不应该再使用 img 标签中的 height 和 width 属性，而是应该使用 CSS 中的 width 和 height属性，例如：

.img {
  width: 100%;
  height: auto;
}

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