Медиа-запросы не запускаются (Angular) - PullRequest
Новая
       21

Медиа-запросы не запускаются (Angular)

0 голосов
/ 06 августа 2020

У меня проблема, когда любой медиа-запрос не работает в компоненте 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;
    }
}

Я включил теги области просмотра в свой индекс. html file: 

<!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 не будет работать вообще, а не только его часть.

1 Ответ

1 голос
/ 06 августа 2020

Проверьте правописание: min-witdh.

И еще кое-что. Всякий раз, когда вы импортируете что-либо в локальный компонент angular s css. Вы продублировали в него глобальный код. Никогда не следует импортировать глобальный s css в локальный, потому что, если глобальный s css вырастет, код приложения может сильно вырасти. Но если вы не импортируете глобальный файл, вы в конечном итоге дублируете правила. Итак, я пришел к выводу, что следует избегать локального компонента s css, который предоставляет angular. Вместо этого разделите глобальный s css на отдельные файлы и импортируйте их глобально только один раз.

...