响应式布局在小屏设备上为啥不生效？

公孙雯雯提问于 2026-03-10 20:50:20 阅读 42

组件

我写了一个简单的响应式布局，用媒体查询设置了不同屏幕宽度下的样式，但在手机上预览时完全没反应，还是桌面端的样式。我试过加 viewport 标签了，也检查了 CSS 顺序，但就是不生效。

这是我的 CSS 代码：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    padding: 10px;
  }
}
.container {
  display: flex;
  flex-direction: row;
  padding: 20px;
}

我来解答赞 4 收藏

反馈

1 条解答

夏侯晓萌 Lv1

问题就在CSS顺序写反了，媒体查询要放基础样式后面，后面的样式会覆盖前面的。

改成这样：

.container {

  display: flex;

  flex-direction: row;

  padding: 20px;

}



@media (max-width: 768px) {

  .container {

    flex-direction: column;

    padding: 10px;

  }

}

2026-03-10 21:00