项目需求:XX项目时间赶,主做PC端,移动端是在原有基础上改动,
在这一基础上,建议直接采用@media 媒体查询
对大小屏幕
进行css调整,通过window.screen.width
判断屏幕宽度
一、需要一个全局globalMixin.js
,判断当前屏幕为移动端还是PC端
export const GlobalMixin = {
data() {
return {
isApp: false // true:代表移动端,false:代表PC端
}
},
created() {
/** 先判断平台,pc端 or 移动端*/
this.whichPlatform()
},
methods: {
/** PC端、移动端 判断*/
whichPlatform() {
if(window.screen.width < 800) {
this.isApp = true
}else {
this.isApp = false
}
}
}
}
二、在.vue
文件中mixins
混入globalMixin.js
,直接根据 isApp
变量修改样式
可以通过 :class
或 :style
改变当前样式,也可根据 @media
媒体查询来修改样式
<template>
<div :class="isApp ? 'red' : 'blue'">
小屏幕背景颜色为红色,大屏幕背景为蓝色 (可以通过F12检查代码,切换大小屏幕,感受变化)
</div>
<div :style="{height: isApp ? '100px' : '300px'}">
小屏幕最小高度为100px,大屏幕高度为300px (可以通过F12检查代码,切换大小屏幕,感受变化)
</div>
<div class="box">
小屏幕宽度为50%,大屏幕宽度为100% (可以通过F12检查代码,切换大小屏幕,感受变化)
</div>
<div class="platform_pc">
(PC端)改行文字在PC端展示,在移动端消失
</div>
<div class="platform_app">
(移动端)改行文字在移动端展示,在PC端消失
</div>
</template>
<script>
import { GlobalMixin } from '@/mixins/globalMixin'
export default {
name: 'XXX',
mixins:[GlobalMixin],
}
</script>
<style>
.red{ background: red;}
.blue{ background: blue;}
.box{ width: 100%}
//媒体查询 自适应
//PC端
@media screen and (min-width:800px){
.platform_pc{
display: block;
}
.platform_app{
display: none;
}
}
//移动端
@media screen and (max-width:700px){
.platform_pc{
display: none;
}
.platform_app{
display: block;
max-width: 100%;
}
.box{ width: 50%;}
}
</style>