前言

最近用vue做移动终端项目，在网上找到了一些移动终端适配方案。我个人觉得手淘队flexible.js相对来说比较好用，在这里做个总结。

科目

flexible.js适配方案采用rem布局，根据不同的屏幕分辨率调整根元素html的字体大小，使每个元素的宽度和高度可以自动变化，适应不同的屏幕

1.安装lib-flexible.js

npm安装库-灵活-保存

1.在项目入口文件main.js中引入lib-flexible

导入“lib-灵活/灵活”

通过以上两个步骤，我们已经完成了在vue项目中使用lib-flexible解决移动自适应的工作。

lib-flexible会自动在html头部添加一个meta name='viewport '标签，并自动将html的字体大小设置为屏幕宽度除以10，即1rem等于html根节点的字体大小。如果设计草图的宽度是750px，那么1em应该等于75px。如果数量元素的宽度是150像素，那么css中定义的元素宽度是：像素

这里有几点需要注意：

1.检查html文件的标题。如果有一个meta name='viewport '标记，则需要注释掉它，因为如果有这个标记，lib-flexible将默认使用这个标记。而我们需要使用lib-flexible生成的meta name='viewport '来达到高清适配的效果。

2.因为html的字体大小是通过将屏幕宽度除以10来计算的，所以我们需要将最大页面宽度设置为10rem。

3.如果我们每次从设计草图中测量尺寸时都手动计算rem，会导致我们的效率较低，并可能出现计算错误，因此我们可以使用px2xrem-loader将css中的px自动转换为rem

使用webpack的px2rem-loader自动将px转换为rem

1.安装px2 rem-装载机

npm安装px2mrem-加载程序-保存-开发

1.配置px2rem加载程序

首先找到build/utils.js文件，并在utils.js中添加以下配置。

找到generateLoaders方法，并在函数中进行如下配置

1.px2rem用法

安装px2rem后使用px2rem有一些不同。可以参考PX2REM的官方介绍。以下是简要介绍。

直接写px，编译后会直接转换成rem除了下面两种情况，其他长度都用这个

在px后添加/*no*/不会转换px，但会按原样输出。-边境将军需要这个

在px后添加/*px*/会根据不同的dpr生成三组代码。-这是一般字体所需要的

下面是我自己写的示例代码，可以参考

原始代码：box { width: 150pxfont-size : 28px；/*px*/border: 1px固体# ddd/*no*/}编译后生成代码：box { width: 2remborder: 1px固体# ddd}[data-dpr='1']。选择器{ font-size : 14px；}[data-dpr='2']。选择器{ font-size : 28px；}[data-dpr='3']。选择器{ font-size : 42px；}基本配置完成，重启项目后可以使用lib-flexible rem编写移动页面

后缀

交朋友，一起学习高级前端

找到我：GitHub

摘要

以上就是边肖介绍的vue.js移动终端的灵活配置. js以及注意事项。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！

如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！