vue如何使用媒体查询实现响应式

Vue可以使用媒体查询实现响应式网页。下面就为大家分享如何使用媒体查询实现响应式的完整攻略。

Step 1. 为响应式设置viewport

在\<head>标签中设置视口为移动设备宽度，这样浏览器会以手机的分辨率来呈现网站。

<meta name="viewport" content="width=device-width, initial-scale=1">

Step 2. 在Vue文件中引入CSS文件

Vue文件中引入CSS文件，可以使用<style>标签或者<link>标签。

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
  export default {
  }
</script>

<style src="./my-style.css"></style>

Step 3. 在CSS文件中设置媒体查询

在CSS文件中使用媒体查询设置不同分辨率下的样式。可以使用@media关键字和CSS的兼容写法。

例如，在宽度小于600px的设备上，设置字体大小为16px：

@media screen and (max-width: 600px) {
  body {
    font-size: 16px;
  }
}

在宽度大于600px的设备上，设置字体大小为20px：

@media screen and (min-width: 600px) {
  body {
    font-size: 20px;
  }
}

除此之外，还可以设置屏幕方向和设备类型等媒体属性。

示例一：使用媒体查询控制图片大小

下面的示例代码中，为宽度大于600px的设备设置图片尺寸为400px；而在宽度小于600px的设备上，设置图片尺寸为300px。

<template>
  <div>
    <img src="./my-image.jpg" alt="My Image" class="responsive-image">
  </div>
</template>

<script>
  export default {
  }
</script>

<style>
  img.responsive-image {
    max-width: 100%;
  }

  @media screen and (min-width: 600px) {
    img.responsive-image {
      width: 400px;
    }
  }

  @media screen and (max-width: 600px) {
    img.responsive-image {
      width: 300px;
    }
  }
</style>

示例二：使用媒体查询控制网格布局

下面的示例代码中，为宽度大于600px的设备使用网格布局；而在宽度小于600px的设备上，使用普通的块级布局。

<template>
  <div>
    <div class="grid-container">
      <div class="grid-item">Item 1</div>
      <div class="grid-item">Item 2</div>
      <div class="grid-item">Item 3</div>
      <div class="grid-item">Item 4</div>
    </div>
  </div>
</template>

<script>
  export default {
  }
</script>

<style>
  @media screen and (min-width: 600px) {
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
    }
    .grid-item {
      background-color: #eee;
      padding: 10px;
    }
  }

  @media screen and (max-width: 600px) {
    .grid-item {
      display: block;
      background-color: #eee;
      padding: 10px;
      margin-bottom: 10px;
    }
  }
</style>

这就是Vue如何使用媒体查询实现响应式的完整攻略。使用媒体查询可以很方便地做到针对不同设备尺寸设置不同样式，从而让网页更加适合移动设备的浏览。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue如何使用媒体查询实现响应式 - Python技术站