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一直在改变。看到这样的效果就说明成功了。