CSS媒体查询不'；使用react build后无法工作_Css_Reactjs_Create React App

CSS媒体查询不'；使用react build后无法工作

css reactjs

CSS媒体查询不'；使用react build后无法工作,css,reactjs,create-react-app,Css,Reactjs,Create React App,我正在使用CreateReact应用程序开发react应用程序。我有一个CSS文件，其中包含以下代码： .gallery { column-count: 3; column-width: 33%; } @media (max-width: 450px) { .gallery { column-count: 1; column-width: 100%; } } 当我运行npm start时，加载的文件如下： .gallery { -webkit-colum

我正在使用CreateReact应用程序开发react应用程序。我有一个CSS文件，其中包含以下代码：

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


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

当我运行

npm start

时，加载的文件如下：

.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%;
  }
}

.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}}

.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%;}}

但是，当我使用命令npm run build构建应用程序时，并没有集中加载文件。每个照片分别加载

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

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

在

中，我也包括了这一点。下面是我的

标签包含的内容：

<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>


照片调查

我如何解决这个问题？

我解决了这个问题

我将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%;
  }
}

.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}}

.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%;}}

但还是什么也没发生。然后我发现在

build/static/css

中有一个名为

main.d31b7c3b.chunk.css

的文件，其中包含

gallery

类，如下所示：

.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%;
  }
}

.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}}

.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%;}}

所以，发生的事情是，不知何故，

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: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-width: 100%;
    -moz-column-width: 100%;
  column-width: 100%;
  }
}

.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}}

.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%;}}

现在一切都准备好了

我明白了