vue项目PC兼容移动端
做完的pc项目要求兼容移动端,常规操作的话是新做一个webapp后再来回跳转,
当前pc项目没有太多的交互和复杂的页面,所以决定在一个项目里进行兼容适配
1.新建两个组件,pc端页面组件,m端页面组件
2.页面写个方法判断是pc端还是移动端(可在全局写)
methods: {//判断_isMobile() {let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)return flag;}},
created(){if (this._isMobile()) {//手机端this.ismOrpc = 'Moperation'//设置remwindow.onload = function(){getRem(750,100)};window.onresize = function(){getRem(750,100)};function getRem(pwidth,prem){var html = document.getElementsByTagName("html")[0];var oWidth = document.body.clientWidth || document.documentElement.clientWidth;html.style.fontSize = oWidth/pwidth*prem + "px";}} else {//pc端this.ismOrpc = 'PCoperation'}
}
3.引入组件
import PCoperation from '@/components/pc/PCoperation'
import Moperation from '@/components/m/Moperation'components: {footerInfo,PCoperation,Moperation
},
4.data设置初始值,根据值显示不同组件
js:
data(){return{ismOrpc:'PCoperation'//默认展示pc}
},
html:
<component :is="ismOrpc"/>
vue项目PC兼容移动端相关推荐
- vue项目浏览器兼容问题
vue项目浏览器兼容问题 Vue项目修改默认滚动条样式:element-ui隐藏标签el-scrollbar.vuescroll插件: IE浏览器不兼容vue-socket.io:vue-socket ...
- Vue项目pc端适配方案(scss)
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
- Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...
- 从 ie10浏览器下Symbol 未定义的问题 探索vue项目如何兼容ie低版本浏览器(ie9, ie10, ie 11 )
1. 问题: vue项目在ie11下一片空白并报Symbol 未定义的错 原因: ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将EC ...
- vue项目系统兼容IE浏览器问题以及解决方案
系统兼容IE浏览器问题以及解决方案 问题 vue项目在IE浏览器上运行时会出现兼容性问题:JavaScript语法报错,css样式错乱.原因是在IE(以IE11为例)浏览器下,部分js的写法需要改变, ...
- 【Vue】pc和移动端网页样式适配
在下面环节会讲解怎么做pc和移动端网页样式适配. 在当下有两种实现样式适配的:JS 适配方案和CSS 媒体查询适配.下面会具体讲解一下代码该怎么写.
- vue项目pc端使用rem进行适配 (lib-flexible+postcss-pxtorem)
1.使用vue-cli创建项目 vue create my-app 2.安装lib-flexible与postcss-pxtorem依赖 npm install lib-flexible -Snpm ...
- vue项目PC端屏幕分辨率与窗口大小自适应
效果 #mermaid-svg-O0n9N0Pq5xuLBK3e .label{font-family:'trebuchet ms', verdana, arial;font-family:var(- ...
- html的vue项目怎么兼容ie,vue 项目在ie浏览器的兼容问题
注意:html vue 只兼容ie8以上版本: IE 不兼容 axios的promiss对象; IE 不兼容es6语法: ES6转ES5 1.关于babel-polyfillvue 一.说明:This ...
最新文章
- R语言使用ggpubr包的ggarrange函数组合多张结论图(垂直组合+水平组合)并对图像进行顺序编码A、B、C,,,
- 网站建设要重视与客户之间的沟通
- Kafka配置6--Windows下设置和增加SASL用户或用户权限
- 一文看懂 9 种Transformer结构!
- 注册表应用100例—注册表使用全攻略之十一
- 内存取证-volatility工具的使用
- Linux操作系统之网络管理
- 洛谷P1463 - 反素数
- 在Android手机上运行Windows系统(虚拟机)
- EFR32上实现精确的软件延时
- gcrobustvar:基于VAR的稳健性Granger因果检验
- 电机学Matlab仿真代码
- MATLAB调用python文件以及调用.exe文件方法
- java计算乘地铁费用_蓝桥杯-地铁换乘
- 北大青鸟 基于.NET的WEB程序设计 视频教程
- 树莓派pico w点灯
- RT-Thread-设备(fal)
- 输入框限制只能输入正数
- 利用SNMP获取H3C交换机端口信息
- 世界上第一台电子计算机很大 质量为35吨,世界上第一台电子计算机很大.质量为35吨.比一头大象体重的6倍还多0.2吨.一头大象重多少吨? 题目和参考答案——青夏教育精英家教网——...
热门文章
- 什么是LoRA模型,如何使用和训练LoRA模型?你想要的都在这!
- 30行代码就可以实现看图识字!python使用tensorflow.keras搭建简单神经网络
- python数据结构与算法 (翻译)第一章
- 学会这招,轻松恢复已删除的手机通讯录
- 整型和短整型,有符号和无符号
- 两化融合贯标申报条件
- NE555的使用与理解
- uboot网络操作解决:ARPRetry count exceeded; starting again ping failed; host 192.168.86.128 is not alive
- 破解卡米 刷机包(ROM)的解包与打包过程
- 软件测试面试题:缺陷提交的流程