Vue移动端适配方案

写在前面

• 现在的手机五花八门，造就了移动端窗口分辨率繁多的局面。
• 在不同分辨率的屏幕下保持与UI图一致的效果，就成了让前端不得不头疼的问题。
• 本文采取的适配方案：阿里推出的lib-flexible + rem适配方案。
• 大致思路：安装lib-flexible相关第三方插件，用于自动设置HTML根元素的基准值。我们写代码时，利用rem单位去书写样式。
• lib-flexible的GitHub

使用到的两个工具介绍

工具一：lib-flexible —— 用于自动设置 rem 基准值

• 1、安装

npm i -S amfe-flexible

很多文章还是使用的npm i lib-flexible -S，但是已经不被推荐，具体可看GitHub:

• 2、在main.js引入

import 'amfe-flexible'

• 3、看具体效果：我们在切换不同设备时，在右边的代码中可以看到html标签的font-size一直在改变。看到这