Question

我遇到一个问题，即任何媒体查询在Angular组件中均不起作用。但是，基于非查询的样式正在应用：

auth-page.component.html

<div class="layout-container">
    <h1>Hello world</h1>
</div>

auth-page.component.scss

@import './../../styles/layout';

_layout.scss

@import './mixins';
@import './variables';

.layout-container {
    padding : 12px;
}

@media only screen and (min-witdh: 100px) {
    .layout-container {
        background-color: red !important;
    }
}

我在index.html文件中包含了视口标签：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width" />
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

应用常规填充，我已经尝试了所有我能想到的东西。我嵌套了查询，将类嵌套在查询中...一切。

我已经使用Angular多年了，但是我从未遇到过这个问题。我完全不知所措，我希望CSS不能工作，而不仅仅是其中的一部分。

Answer 1

检查您的拼写：min-witdh。

还有另一件事。每当您将某些内容导入到有角度的本地组件scss中时。您将全局代码复制到其中。您永远不应将全局scss导入本地，因为如果全局scss增长，则应用程序代码可能会增长很多。但是，如果您不导入全局文件，那么最终将导致重复规则。因此，我得出的结论是，应避免使用角度提供的局部分量scss。相反，请使用全局scss来分隔文件，然后仅将它们全局导入一次。

媒体查询未触发（角度）

1 个答案: