vue之移动端适配

最新推荐文章于 2025-06-25 09:08:29 发布

牛先森家的牛奶

最新推荐文章于 2025-06-25 09:08:29 发布

阅读量618

点赞数 1

CC 4.0 BY-SA版权

分类专栏：移动端 Vue 文章标签： vue.js css html

本文链接：https://blog.csdn.net/weixin_42681295/article/details/120513937

Vue 同时被 2 个专栏收录

122 篇文章

订阅专栏

移动端

6 篇文章

订阅专栏

本文介绍了使用Vue.js进行移动端适配的方案，包括在index.scss中设置根元素的字体大小以实现rem布局，以及针对不同屏幕尺寸设置断点。同时，展示了在main.js中引入scss文件，利用Vant UI库进行移动端适配，并使用自定义指令、全局组件和过滤器增强应用功能。App.vue中处理窗口大小变化，确保页面响应式布局。此外，还给出了页面样式的具体写法，包括Flex布局和文本溢出处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue之移动端适配

- vue之移动端适配

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>