vue 移动端适配 两种方案

vue中实现移动端的适配

使用淘宝团队的 Flexible实现手淘H5页面的终端适配
原文链接 添加链接描述

1.首先将两个 （flexible.debug.js）（flexible_css.debug.js） js文件下载，导入项目

2.运用，假设 设计稿是 750的，现在有一个div 宽 100px 高100px ,此时我们使用rem去做适配单位，使用vscode可以下载 css 转rem的插件 并设置转换的值，750的rem基准值是 75 （建议看链接），所以得到单位应该是 宽 100/75 rem 高 100/75rem

使用vw结合rem实现适配

1.首先 适配的meta标签少不了

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

2.设置 html{font-size:13.33333333vw} -----> 使用 设计稿 100px 100px -------> 1rem 1rem

原理

a vw------>表示屏幕 1%的宽度
b 设计稿 750px
c 计算 1px == rem? -----> 100/750-------- 1px = 0.133333vw
d 设置根元素 大小 font-size：13.33333333vw 扩大 100倍，100px = 1rem
e 设计稿上所有尺寸 除以100

附上 几个关于mate标签的说明
http://www.daqianduan.com/6281.html
http://www.w3cfuns.com/notes/18165/f08c0ec910dad6d2c90807a0318abda8.html