在下面环节会讲解怎么做pc
和移动端
网页样式适配。
在当下有两种实现样式适配的:JS 适配方案
和CSS 媒体查询适配
。下面会具体讲解一下代码该怎么写。
🙏 希望该文章能帮助到你。
1. JS 适配方案
比如在src/router/index.vue
文件中有一个统一的Layout
组件包裹,可以在Layout
组件内部通过当前界面尺寸监听来判断当前是PC
还是移动端
。 可以新建一个mixin
类文件ResizeHandler.js
,内容如下:
constWIDTH=992 exportdefault{ beforeMount(){ window.addEventListener('resize',this.$_resizeHandler) }, beforeDestroy(){ window.removeEventListener('resize',this.$_resizeHandler) }, mounted(){ constisMobile=this.$_isMobile() //做相应的逻辑处理,控制哪些显示哪些不显示?怎么显示?等 }, methods:{ $_isMobile(){ constrect=body.getBoundingClientRect() returnrect.width-1<WIDTH }, $_resizeHandler(){ if(!document.hidden){ constisMobile=this.$_isMobile() store.dispatch('app/toggleDevice',isMobile?'mobile':'desktop') //做相应的逻辑处理,控制哪些显示哪些不显示?怎么显示?等 } } } }const{body}=document
然后在Layout
组件中使用:
importResizeMixinfrom'./mixin/ResizeHandler' exportdefault{ name:'xxxxx', mixins:[ResizeMixin], } </script><script>
其他界面就可以通过globalStore
的方式,从在store
里面获取了当前设备是mobile
或者desktop
了。
2. CSS 媒体查询适配
当前描述的项目使用的是less
。
首先,在项目的src/styles
中新建文件variables.less
。文件内容如下:
@mobile:~'onlyscreenand(max-width:767px)';@prefix:gycc;
然后,在具体的界面文件中导入这个less
文件。
@importurl("@/styles/variables.less"); .${prefix}-context{ //在正常PC网页上显示80%比例 width:80%; @media@mobile{ //在手机端显示100%比例 width:100%; } } </style><stylelang="less"scoped>
根据这种情况可以在具体的场景中,去根据不同的尺寸实现样式兼容。
总结
上面就是我开发过程使用的两种适配方式了,如果有其他方式,欢迎在下方评论区讨论,🎉 谢谢!
— 微信公众号:全栈之鬼影重重 —