@media 查询在 Chrome 中运行良好，但在移动设备上无法运行

Question

我用 React 做了一个应用程序。 笔记本电脑 Chrome 上一切正常。 但是当我检查我的手机时，@media 查询不起作用。 我几乎阅读了有关 stackoverflow 的所有问题和答案。 我找不到解决方案。

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

和我的代码示例

.home-wrapper {
  position: relative;
  width:1366px;
}
@media screen and (max-width: 400px){
  .home-wrapper {
    width:375px;
}

你可以帮帮我吗？ 谢谢。

Answer 1

很可能您的手机宽度超过400px ，因此没有进入媒体查询条件。

您可以在不使用媒体查询的情况下实现您想要的，只需使用带有width max-width ，如下所示：

 .home-wrapper { position: relative; max-width:1366px; width: 100%; /*or another value you want here like 90% or 90vw */ /* just for demo */ height: 200px; background: lightblue }

 <div class="home-wrapper"></div>