面试题：Vue项目中如何使用媒体查询实现响应式布局

Question

在Vue项目里，阐述使用媒体查询（@media）来实现响应式布局的具体步骤和常见场景，比如如何根据不同屏幕宽度切换页面元素的样式和布局。

Answer 1

具体步骤

1. 引入样式文件：在Vue项目的入口文件（如main.js）中引入包含媒体查询的样式文件，通常是css或scss文件。例如，在main.js中：

import './styles/main.css'

2. 编写媒体查询代码：在样式文件中编写@media查询代码。以css为例，语法为@media (media - feature) { /* 样式规则 */ }。其中media - feature常见的是min - width（最小宽度）和max - width（最大宽度）。

/* 当屏幕宽度小于等于 600px 时 */
@media (max - width: 600px) {
  body {
    background - color: lightblue;
  }
}

/* 当屏幕宽度大于等于 992px 时 */
@media (min - width: 992px) {
  body {
    background - color: lightgreen;
  }
}

3. 应用到Vue组件：样式会自动应用到Vue组件对应的元素上。如果需要对特定组件进行响应式样式修改，可以在组件的scoped样式中编写媒体查询。例如：

<template>
  <div class="my - component">
    <p>这是一个组件</p>
  </div>
</template>

<style scoped>
@media (max - width: 768px) {
 .my - component {
    font - size: 14px;
  }
}
</style>

常见场景

1. 导航栏切换：在小屏幕上，将水平导航栏转换为折叠式导航栏（如常见的汉堡菜单）。

.nav {
  display: flex;
  justify - content: space - around;
}

@media (max - width: 768px) {
 .nav {
    flex - direction: column;
  }
}

2. 图片布局调整：在大屏幕上，图片以多列布局展示，小屏幕上改为单列布局。

.image - container {
  display: grid;
  grid - template - columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max - width: 992px) {
 .image - container {
    grid - template - columns: 1fr;
  }
}

3. 文本字体大小调整：小屏幕上适当减小文本字体大小，以适应屏幕空间。

p {
  font - size: 16px;
}

@media (max - width: 600px) {
  p {
    font - size: 14px;
  }
}