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

Posted 2023-03-05

【中文标题】为啥媒体查询在 Angular8 中不起作用

【英文标题】：Why Media Queries not working in Angular8为什么媒体查询在 Angular8 中不起作用

【发布时间】：2020-07-07 23:46:16

【问题描述】：

我在 CLI 版本 8 上运行 Angular 应用程序。上次我将代码检查到 github 并构建生产时一切正常。但是现在当我尝试在 localhost 上运行它时，似乎出现了问题。 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)  

请帮助我摆脱这种情况。提前致谢。

【问题讨论】：

您的媒体查询在 css 文件的末尾？

没有我的 CSS 文件以这些媒体查询开头

我希望您的 html 文件中添加了 viewport 元标记。 <meta name="viewport" content="width=device-width, initial-scale=1.0">

是的，它就在那里。

【参考方案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) 

【讨论】：

我的媒体查询之外没有 CSS。我只是尝试将它们放在外面并且它工作但是当我将我的 CSS 放在媒体查询中时它不起作用

将您的媒体查询从大屏幕反转为小屏幕。我更新了我的答案。如果不起作用，请尝试删除“仅”一词

@neerav94 您的媒体查询（例如 801->849 px 和 1025->1223）之间也存在空白。这些像素没有样式

两个都改了，但还是不行

你能创建一个stackblitz 在那里测试它吗？

【参考方案2】：

感谢您的帮助！

我使用的 npm 包中似乎有一些错误。删除了包装，一切都按预期正常工作。我使用的 npm 包是 ngx-swiper-wrapper。

【参考方案3】：

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

谢谢！

【参考方案4】：

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

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

【参考方案5】：

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

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