关于vue项目移动端和pc端跳转页面不同及移动端rem pc端px冲突 方法记录

首先在components文件夹中，创建移动端和pc端的文件页面

每创建一个新的页面  我们都需要在router  文件夹下的 index.js中配置一下，如下图我把我新添加的几个页面都配置在了index.js中

最重要的一步就是判断是移动端还是pc端，同样是在此文件夹中书写，在下面直接写判断就可以，因为图片不好展示，所以我就直接贴代码：

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

router.push({name:"mobile"})        //判断是否为移动端的设备，是移动端的话  跳转  mobile 页面

                                                        //否则为pc端  跳转index页面

}else{

router.push({name:"index"})

}

export default router    //记得加这一行代码

下面是index.js的全部代码：

import Vue from 'vue'

import Router from 'vue-router'

import index from '@/components/views/index'

import list from '@/components/views/list'

import mobile from '@/components/mobile/mobile'

import mobList from '@/components/mobile/mobList'

Vue.use ( Router )

let router = new Router({

routes: [

{ path: '/mobile', name: 'mobile', component: mobile },

{ path: '/mobList', name: 'mobList', component: mobList },

{ path: '/', name: 'index', component: index },

{ path: '/list', name: 'list', component: list }

]

})

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

router.push({name:"mobile"})

}else{

router.push({name:"index"})

}

export default router

在此后我还遇到移动端用rem 和pc端用px冲突问题，也在此记录

首先我是使用了一个封装好的js文件，早先是用做移动端判断窗口大小的从而得到自适应，如果只用rem布局的时候，直接可以把它放在js文件中引用即可：

需要讲解的是这段代码   document.documentElement.style.fontSize=w/375*100+"px";

我这里写的是 375px  的设计稿，如果你的设计稿也是375 的话，可直接在  html{ font-size：100px}   也就是 1rem = 100px

如果你的设计稿是 1920px 的，可直接在375处改为1920  即html 仍为 {font-size：100px}    也就是 1rem = 100px

(function (){

function browserResize(){

var w=window.innerWidth;//获取浏览器窗口宽度

document.documentElement.style.fontSize=w/375*100+"px";

}

browserResize();

var browserTimer; window.addEventListener("resize",function(){

clearTimeout(browserTimer);

browserTimer=setTimeout(browserResize,200) })

})()

因为我需要判断  为移动端的事都才需要用到此  方法，所以我就在宽度位置做了判断，当他小于 450px （当然你也可以判断为移动端的时候）的时候才让此方法执行

(function (){

function browserResize(){

var w=window.innerWidth;//获取浏览器窗口宽度

if(w<450){

     document.documentElement.style.fontSize=w/375*100+"px";

} }

browserResize();

var browserTimer;

window.addEventListener("resize",function(){

clearTimeout(browserTimer);

browserTimer=setTimeout(browserResize,200)

})

})()