vue 自动检测手机端响应式布局的五种实现

/* 默认样式（例如，桌面） */
.content {
  width: 800px;
}

/* 当屏幕宽度小于等于600px时应用的样式（例如，手机） */
@media (max-width: 600px) {
  .content {
    width: 100%;
  }
}

<template>
  <div :class="{ 'mobile-layout': isMobile }">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false,
      windowWidth: window.innerWidth,
    };
  },
  mounted() {
    window.addEventListener('resize', this.updateScreenWidth);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateScreenWidth);
  },
  methods: {
    updateScreenWidth() {
      this.windowWidth = window.innerWidth;
      this.isMobile = this.windowWidth <= 600; // 假设600px为移动设备的界限
    },
  },
};
</script>

<style>
.mobile-layout {
  /* 适用于手机的样式 */
}
</style>

// main.js
import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta, {
  // 配置选项
})

new Vue({
  // ...
})