为什么媒体查询在Angular8中不起作用

Question

我正在CLI版本8上运行一个angular应用程序。上次我把代码检查到github并为生产构建时，一切都很好。但现在，当我尝试在本地主机上运行它时，似乎出现了问题。HTML文件没有从CSS文件中获取媒体查询。当我在媒体查询外编写CSS时，一切都很好，但在媒体查询内却不起作用。

此外，当我尝试检查chrome时，类会附加在HTML标记上，但CSS不会显示。我不知道我哪里做错了。我的猜测是因为一些构建导致了错误，或者是因为一些npm包，或者可能是其他原因。

以下是我正在使用的媒体查询：

/* mobiles (landscape and portrait) */
@media only screen and (min-width: 320px) and (max-width: 500px) {}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 550px) and (max-width: 800px) {}

/* Desktops and laptops ----------- */
@media only screen and (min-width: 850px) and (max-width: 1024px) {}
/* bigger laptops */
@media only screen and (min-width: 1224px) { }

请帮我摆脱这种局面。提前谢谢。

Answer 1

媒体查询应该在css文件的末尾，因为css是从上到下读取的。最后设置的规则是将要执行的

/* bigger laptops */
@media only screen and (min-width: 1224px) { }
/* Desktops and laptops ----------- */
@media only screen and (min-width: 850px) and (max-width: 1024px) {}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 550px) and (max-width: 800px) {}
/* mobiles (landscape and portrait) */
@media only screen and (min-width: 320px) and (max-width: 500px) {}

Answer 2

感谢您的帮助！

我使用的npm包中似乎有一些错误。删除了程序包，一切都如预期的那样正常。我使用的npm包是ngx-swipper包装。

Answer 3

尝试在组件中本地添加样式。例如，在我的案例中，全局样式似乎不起作用，将它们本地添加到组件本身就起作用了。

谢谢！

Answer 4

通过将style.css声明移到angular.json中的下一个引导程序来修复，这样我的自定义样式将覆盖引导程序样式。

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],

Answer 5

运行以下命令在项目中安装媒体查询

1. bower install ng-media-query
2. npm install ng-media-query
3. Download ng-media-query.js or ng-media-query.min.js