vue使用@media screen

@media screen 是一个CSS中的媒体查询规则，用于根据不同的屏幕宽度或设备类型来应用不同的样式。在Vue中使用@media screen，可以通过以下步骤进行：

1. 在Vue组件的 `<style>` 标签中定义样式，并使用@media screen来添加媒体查询规则。例如：

<style>
  /* 默认样式 */
  .my-element {
    color: blue;
  }

  /* 在屏幕宽度小于600px时应用的样式 */
  @media screen and (max-width: 600px) {
    .my-element {
      color: red;
    }
  }
</style>

2. 在Vue组件的模板中，将需要应用不同样式的元素添加相应的类名。例如：

<template>
  <div>
    <p class="my-element">Hello, world!</p>
  </div>
</template>

上述代码中，当屏幕宽度小于600px时，`.my-element` 类将应用红色的颜色样式；否则，将应用蓝色的颜色样式。

通过这种方式，你可以根据不同的屏幕宽度或设备类型来调整Vue组件的样式。