vue2媒体查询适配h5和web端

首先APP.vue设置html字体大小

@media ( min-width: 320px){html{font-size:50px}}
@media ( min-width: 360px){html{font-size:56.25px}}
@media ( min-width: 375px){html{font-size:58.59375px}}
@media ( min-width: 384px){html{font-size:60px}}
@media ( min-width: 400px){html{font-size:62.5px}}
@media ( min-width: 414px){html{font-size:64.6875px}}
@media ( min-width: 424px){html{font-size:66.25px}}
@media ( min-width: 480px){html{font-size:75px}}
@media ( min-width: 540px){html{font-size:84.375px}}
@media ( min-width: 640px){html{font-size:100px}}
@media (min-width: 1024px){html{font-size: 18px}}
@media (min-width: 1100px) {html{font-size: 20px}}
@media (min-width: 1280px) {html{font-size: 22px;}}
@media (min-width: 1366px) {html{font-size: 24px;}}
@media (min-width: 1440px) {body,html{font-size: 25px;}}
@media (min-width: 1680px) {body,html{font-size: 28px;}}
@media (min-width: 1920px) {body,html{font-size: 33px;}}

utils文件里面新建tool.js文件判断系统

// 判断手机系统
export const getNavigatorType = () => {
  let temp = ''
  var u = navigator.userAgent
  if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
    temp = 'Android'
  } else {
    temp = 'ios'
  }
  return temp
}

main.js文件原型挂载

if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    Vue.prototype.$pc = false
} else {
    Vue.prototype.$pc = true
}

APP.vue文件加入以下代码

判断设备情况，并根据设备切换路由

import { getNavigatorType } from '@/utils/tool.js'
export default {
    name: 'app',
    components: {},
    watch: {
        $route: function (to, from) {
        //判断设备情况，并根据设备切换路由
            if (to.name.indexOf('_p') > 0 && !this.$pc) {
                console.log("移动端")
                this.$router.replace(to.name.split('_p')[0])
                //电脑转手机端
                //域名为index_p去掉_p变成手机端index路由
                if (to.name=="index_p") {
                    let str = to.name.split("_p")[0];
                    let str2 = '/'+str;
                    this.$router.push(str2);
                }
            } else if (to.name.indexOf('_p') < 0 && this.$pc) {
                console.log("pc端")
                //手机端转电脑
                //在路由尾巴添加_p变成电脑端
                this.$router.replace(to.name + '_p')
            }
        }
    },
    mounted () {
    //根据系统来判断是否需要加padding
        let navigatorType = getNavigatorType()
        console.log(navigatorType)
        if (navigatorType === 'Android') {
        document.querySelector('#app').style.paddingTop = '20px'
        }
    },

}

其他就是基本操作，需要注意的是这样规划下来的router路由，web端尾部会带_p，文件路径需要重新规划

自己写着完，记录一下，有不对的欢迎指正，感谢