首先在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)
})
})()
网友评论