vue中关于@media媒体查询的使用

当我们在使用 Vue 开发 Web 应用程序时，经常需要针对不同的屏幕尺寸进行布局和样式的调整。媒体查询（Media Queries）是一种很好的解决方案，它可以根据设备的屏幕尺寸自适应调整样式表的规则。在 Vue 中使用媒体查询也非常简单。

使用方式

在 Vue 中使用媒体查询，我们可以使用 @media 规则。这个规则可用于 CSS 样式表中，也可用于 Vue 模板中。具体用法如下：

CSS 样式表中使用

在 CSS 样式表中，我们可以直接使用 @media 规则，例如：

@media screen and (max-width: 720px) {
  .container{
    width: 100%;
  }
}

上面代码表示：当屏幕宽度小于等于 720 像素时，.container 元素的宽度将设置为 100%。我们可以通过 min-width、max-width、min-height、max-height 等不同的参数来设置媒体查询的规则。

Vue 模板中使用

在 Vue 模板中，我们可以使用 style 标签内的 @media 规则，例如：

<template>
  <div class="container" :class="{'full-width': isMobile}">
    <p>Hello, world!</p>
  </div>
</template>

<style scoped>
.container {
  width: 720px;
}

@media screen and (max-width: 720px) {
  .container {
    width: 100%;
  }
  .full-width {
    width: 100%;
  }
}
</style>

<script>
export default {
  data() {
    return {
      isMobile: false
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      if (window.innerWidth <= 720) {
        this.isMobile = true
      } else {
        this.isMobile = false
      }
    }
  }
}
</script>

上面代码中，我们引入了一个 isMobile 数据，用于判断屏幕是否为移动设备。在 mounted 钩子中，我们添加了 resize 事件监听，用于监测窗口尺寸的变化。在 handleResize() 方法中，当窗口宽度小于等于 720 像素时，我们将 isMobile 数据设置为 true，当窗口宽度大于 720 像素时，我们将 isMobile 数据设置为 false。然后在模板中，我们根据 isMobile 的值来添加一个 full-width 类，用于使 .container 元素宽度设置为 100%，从而达到适配移动设备屏幕的效果。

示例说明

示例一：Header 自适应

<template>
  <header class="header" :class="{'fixed': isFixed}">
    <!-- Header 内容 -->
  </header>
</template>

<style scoped>
.header {
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
@media screen and (max-width: 768px) {
  .header {
    height: 40px;
    line-height: 40px;
  }
}
</style>

上面代码中，我们创建了一个 Header 组件，并为其添加了一个 .header 类用于设置 Header 的样式。当屏幕宽度小于等于 768 像素时，我们使用媒体查询将 Header 的高度设置为 40px，从而达到适配移动设备屏幕的效果。另外，当使用者滚动屏幕时，我们使用添加一个 .fixed 类，将 Header 固定在页面顶部。

示例二：表格自适应

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(user, index) in users" :key="index">
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.address }}</td>
        <td>{{ user.phone }}</td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 768px) {
  th, td {
    padding: 4px;
  }
}
</style>

<script>
export default {
  data() {
    return {
      users: [
        { name: 'Alice', age: 20, address: 'New York', phone: '123456' },
        { name: 'Bob', age: 22, address: 'Los Angeles', phone: '456789' },
        { name: 'Charlie', age: 24, address: 'Chicago', phone: '789012' },
        { name: 'Dave', age: 26, address: 'Houston', phone: '345678' }
      ]
    }
  }
}
</script>

上面代码中，我们演示了一种表格布局的自适应方法，即在保持表格宽度为 100% 的前提下，根据屏幕尺寸调整表格的单元格（th 和 td）的内边距（padding），从而达到自适应的效果。当屏幕宽度小于等于 768 像素时，我们使用媒体查询将表格单元格的内边距设置为 4px。这样，在不同的屏幕尺寸下，我们都可以看到舒适的表格布局。