前端开发中，要在不同的设备上呈现良好的界面效果，就需要进行移动端适配。而在 Vue.js 中实现移动端适配，我们可以使用 flexible.js 工具。
什么是 flexible.js
flexible.js 是一款移动端适配方案，使用该方案可以让我们开发出适应不同设备屏幕尺寸的页面。该方案使用 JavaScript 实现对根元素 font-size 的计算，从而实现不同屏幕下的自适应效果。
如何使用 flexible.js
- 使用 npm 安装 flexible.js
npm install flexible.js --save
- 在 Vue.js 中引入 flexible.js
在 main.js 中引入 flexible.js：
import 'flexible.js'
- 开始使用
引入 flexible.js 后，我们就可以在 Vue.js 项目中开始使用移动端适配了。以使用 rem 作为单位为例，可以在样式表中根据设计稿的尺寸来设置相应的样式。
假设设计稿的大小为 750*1334，在样式表中可以这样设置根元素的 font-size：
html{
font-size: calc(100vw/7.5);
}在上例中，我们将根元素的 font-size 设置为了 100vw/7.5，其中 7.5 表示设计稿的宽度除以 100。
接下来，在样式表中，可以将设计稿中元素的尺寸除以 100，再将单位 px 替换为 rem，这样就可以根据设计稿自适应不同的设备了。
div{
width: 7.5rem; /* 设计稿中宽度为 750px */
height: 2.8rem; /* 设计稿中高度为 280px */
font-size: 0.4rem; /* 设计稿中字体大小为 40px */
}实例代码
/* main.js */ import 'flexible.js'
-- -------------------- ---- ------- -- --------- -- ----- ---------- ---------------- - ---- ------ ------- -- ------- ----- -- ------- ------- -- ------- ----- -- ---------- ------- -- --------- ---- -- -
总结
使用 flexible.js 工具能够很好地实现移动端适配，将根据浏览器宽度计算出来的 font-size 运用到样式表中，使得设计稿中的元素可以自适应各种设备屏幕尺寸。同时，设备的缩放和旋转等操作也可以根据不同设备的特性灵活适应，让页面的显示效果更加高效和贴近用户需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c759a968c7c53b077e903