CSS 使用 React 构建后媒体查询不起作用

Question

我正在使用 Create-React-App 开发一个 React 应用程序。我有一个包含以下代码的 CSS 文件：

.gallery {
  column-count: 3;
  column-width: 33%;
}


@media (max-width: 450px) {
  .gallery {
    column-count: 1;
    column-width: 100%;
  }
}

当我运行 npm start 时，文件加载如下：

但是当我使用命令 npm run build 构建应用程序时，文件并没有被加载。每张照片单独加载。

随着我的探索，我发现了一些建议使用的答案

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

在 <head></head> 里面，我也包括了那个。这是我的 <head></head> 标签包含的内容：

<head>
    <meta charset="utf-8"><link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="Web site created using create-react-app">
    <link rel="apple-touch-icon" href="/logo192.png">
    <link rel="manifest" href="/manifest.json">
    <title>Photo Poll</title>
    <link href="/static/css/2.27df2d27.chunk.css" rel="stylesheet">
    <link href="/static/css/main.aae8b75c.chunk.css" rel="stylesheet">       
</head>

我该如何解决这个问题？

Answer 1

我知道了。

我更改了 CSS 代码如下：

.gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 33%;
  -moz-column-width: 33%;
  column-width: 33%;
}


@media (max-width: 450px) {
  .gallery {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-width: 100%;
    -moz-column-width: 100%;
  column-width: 100%;
  }
}

但是还是没有任何反应。然后我发现在build/static/css里面有一个名为main.d31b7c3b.chunk.css的文件，其中包含gallery class如下：

.gallery{-webkit-column-count:3;-webkit-column-width:33%;columns:33% 3}@media (max-width:450px){.gallery{-webkit-column-count:1;-webkit-column-width:100%;columns:100% 1}}

所以，发生的事情是以某种方式 npm run build 排除了我放入原始代码中的其他 CSS 属性。所以我手动更改如下：

.gallery{-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;-webkit-column-width: 33%;-moz-column-width: 33%;column-width: 33%;}@media (max-width:450px){.gallery{-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;-webkit-column-width: 33%;-moz-column-width: 33%;column-width: 33%;}}

现在一切都准备好了！

CSS 使用 React 构建后媒体查询不起作用

CSS media query doesn't work after using react build

css

reactjs

create-react-app