vue之移动端适配
网上方案很多,适配原理什么的不多说,说说我项目中使用的适配方案;
index.scss公共文件
html,
body {
width: 100%;
height: 100%;
background-color: #f2f2f2;
font-family: 'Encode Sans Condensed', sans-serif;
}
:root {
--vh100: 100vh;
}
/* 移动端rem响应式 */
html {
font-size: calc(100vw / 7.5);
}
@media screen and (min-width: 450px) {
html {
font-size: calc(450px / 7.5);
}
}
@media screen and (max-width: 300px) {
html {
font-size: calc(300px / 7.5);
}
}
// 隐藏滚动条
* {
// 兼容IE10+
-ms-overflow-style: none;
// 兼容火狐
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
::-webkit-scrollbar {
display: none;
}
[v-cloak]{
display: none;
}
.flex {
display: flex;
}
.flex-center {
display: flex;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
}
.flex-between-center {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-center-center {
display: flex;
justify-content: center;
align-items: center;
}
.bg-fff {
background: #ffffff;
}
.ellipse-2 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
.ellipse-3 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical
}
...
// 公共样式
public 中 index.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= webpackConfig.name %>
</title>
<style>
/* 隐藏友盟统计的a标签 */
a[title]:first-child {
display: none;
}
/* a[title]:not(#app a) {
display: none;
} */
</style>
</head>
<body>
<div id="app"></div>
<!-- 初始化 移动端日志查看 -->
<!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
console.log(VConsole);
var vConsole = new VConsole();
console.log('VConsole is cool 本地测试');
</script> -->
</body>
</html>
main.js中引入scss文件
import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from './store'
import '@/styles/reset.scss'
import Vant from 'vant'
import { Lazyload } from 'vant'
import 'vant/lib/index.css'
import '@/styles/common.scss'
// vant桌面端适配
import '@vant/touch-emulator'
Vue.use(Vant)
Vue.use(Lazyload, {
lazyComponent: true,
})
// 注册全局loding组件
import loading from '@/utils/loading'
Vue.use(loading)
// 注册全局confirm组件
import Dialog from '@/utils/dialog'
Vue.use(Dialog)
// 全局过滤器
import * as filters from './filters'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
// 全局自定义指令
import * as directives from './directives'
Object.keys(directives).forEach(key => {
Vue.directive(key, directives[key])
})
import './permission'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
App.vue文件
<template>
<div id="app">
<keep-alive>
<router-view class="appView" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view class="appView" v-if="!$route.meta.keepAlive" ref="appView"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: { },
created() {
document.documentElement.style.setProperty(
'--vh100',
`${window.innerHeight}px`
)
window.addEventListener('resize', () => {
document.documentElement.style.setProperty(
'--vh100',
`${window.innerHeight}px`
)
})
},
data() {
return {}
},
computed: {},
watch: {}
}
</script>
<style lang="scss">
#app {
color: #333;
font-size: 0.24rem;
width: 100%;
height: 100%;
max-width: 450px;
margin: 0 auto;
height: -webkit-fill-available; //need test
background-color: #fff;
overflow: auto;
}
.appView {
width: 100%;
height: 100%;
}
</style>
感谢龙哥的指导和支持;
页面的样式写法如下
<template>
<div class="page">
<div class="header">头部区域</div>
<div class="scroll-wrapper">内容区域</div>
<div class="footer">底部按钮固定区域</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
}
},
computed: {},
watch: {}
created() {},
mounted() {
this.handleSearch()
},
methods: {},
}
</script>
<style lang="scss" scoped>
.page {
display: flex;
flex-direction: column;
height: 100%;
height: var(--vh100, 100vh);
.scroll-wrapper {
background: #f5f6fb;
padding: 0.3rem 0.3rem 0;
height: 100%;
flex: 1;
overflow-y: auto;
// 这里注释可以让内容区域一起滚动,使得滚动区域变大一点
// .content {
// height: calc(100% - 0.9rem);
// flex: 1;
// overflow-y: auto;
// }
}
.footer {
background: #ffffff;
box-shadow: 0 -0.04rem 0.08rem rgba(223, 223, 223, 0.3);
padding: 0.3rem;
z-index: 99; /* 使重叠的时候盒子阴影生效 */
.btn {
padding: 0.22rem 0;
text-align: center;
border-radius: 0.08rem;
height: 100%;
background: $primaryColor;
font-size: 0.32rem;
color: #ffffff;
line-height: 0.44rem;
cursor: pointer;
}
}
}
</style>