媒体查询在 Vue 组件里为啥不生效？

UP主～邦威提问于 2026-02-24 22:38:20 阅读 22

移动

我在 Vue 单文件组件里写了媒体查询，但不管怎么缩放屏幕，样式都没变化，是不是写法有问题？

试过把 CSS 放在 <style> 里，也加了 scoped，但断点完全没触发：

<template>
  <div class="card">响应式卡片</div>
</template>

<style scoped>
.card {
  width: 300px;
  background: lightblue;
}

@media (max-width: 768px) {
  .card {
    width: 100%;
    background: salmon;
  }
}
</style>

响应式布局移动端开发

我来解答赞 3 收藏

反馈

2 条解答

UI光远 Lv1

你这代码本身没问题，但 scoped 样式里写媒体查询有个坑：CSS 里写的媒体查询规则，会被 Vue 编译器自动包裹在 scoped 的选择器里，导致断点条件虽然触发了，但选中的其实是类似 .card[data-v-xxxxx] 的 selector，而媒体查询内部又套了一层 .card，结果变成 @media (max-width: 768px) { .card[data-v-xxxxx] .card { ... } }，这当然匹配不到。

解决办法有两个，一个是把媒体查询提到 scoped 外面，用全局样式覆盖；另一个更常用的是用 :deep（Vue 3）或者 ::v-deep（Vue 2）让媒体查询里的样式穿透 scoped。

复制过去试试这个写法（Vue 3）：

Vue 2 的话把 :deep 换成 ::v-deep 就行：

或者干脆把媒体查询那段抽出去，写个非 scoped 的