vue3的媒体查询在那个文件配置
时间: 2024-05-06 13:16:31 浏览: 12
在 Vue 3 中,媒体查询可以在单独的 CSS 文件中进行配置,也可以在 Vue 组件的 `<style>` 标签中进行配置。如果你想在单独的 CSS 文件中配置媒体查询,可以在 HTML 文件中引入该文件,例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue 3 Media Queries Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script src="app.js"></script>
</body>
</html>
```
然后在 styles.css 文件中配置媒体查询:
```css
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
```
如果你想在 Vue 组件的 `<style>` 标签中配置媒体查询,可以直接在 `<style>` 标签内使用 `@media` 规则:
```html
<template>
<div class="app">
<h1>Hello, World!</h1>
</div>
</template>
<style>
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
.app {
padding: 20px;
}
</style>
```
需要注意的是,如果你使用了 CSS 预处理器,如 Sass 或 Less 等,媒体查询的语法可能会与原生 CSS 略有不同。