Почему медиа-запросы не подходят для максимальной ширины 425 пикселей? - PullRequest
Новая
       14

Почему медиа-запросы не подходят для максимальной ширины 425 пикселей?

0 голосов
/ 05 мая 2020

Я хочу применить медиа-запрос для max-width 768px и max-width 425px, но когда у меня ширина 425 пикселей, применяются стили медиа-запросов для max-width 768px (поэтому с шириной устройства 425 пикселей ширина al-articles-tags-chip-list-container будет 600px), почему?

А для width 768px медиа-запросы применяются и для max-width 768px (как и ожидалось). 

.al-articles-tags-chip-list {
  width: 100%;
}

.al-text-before-search {
  font-size: 36px;
  margin-right: 22px;
}

.al-search-input-container {
  flex: 2;
}

.al-articles-tags-chip-list-container {
  margin: 0 auto;
  padding-top: 150px;
  width: 1000px;
  display: flex;
}


@media only screen and (max-width: 1024px) {
  .al-articles-tags-chip-list-container {
    width: 700px;
  }
}

@media only screen and (max-width: 768px) {
  .al-articles-tags-chip-list-container {
    width: 600px;
  }

  .al-text-before-search {
    font-size: 26px;
  }
}

@media only screen and (max-width: 425px) {
  .al-articles-tags-chip-list-container {
    display: block;
    width: 300px;
    padding-top: 115px;
  }

  .al-text-before-search {
    font-size: 26px;
  }

  .al-search-input-container {
    flex: unset;
  }
}
<div class="al-articles-tags-chip-list-container">
  <div class="al-text-before-search">
    <span>I WOULD LIKE TO SEE</span>
  </div>
  <div class="al-search-input-container">
    <mat-form-field class="al-articles-tags-chip-list">
      ....
    </mat-form-field>
  </div>
</div>

Ответы [ 3 ]

1 голос
/ 05 мая 2020

Вам нужно добавить мета viewport в тег заголовка.

Я воспроизвожу ваш код, он сработал.

Обновлено: Я также пытался воспроизвести ваш код в angular, это сработало, вам нужно проверить любой конфликт @media в ваших стилях. css или нет

https://stackblitz.com/edit/angular-check-mediaquery

enter image description here

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .al-articles-tags-chip-list {
  width: 100%;
}

.al-text-before-search {
  font-size: 36px;
  margin-right: 22px;
}

.al-search-input-container {
  flex: 2;
}

.al-articles-tags-chip-list-container {
  margin: 0 auto;
  padding-top: 150px;
  width: 1000px;
  display: flex;
}


@media only screen and (max-width: 1024px) {
  .al-articles-tags-chip-list-container {
    width: 700px;
  }
}

@media only screen and (max-width: 768px) {
  .al-articles-tags-chip-list-container {
    width: 600px;
  }

  .al-text-before-search {
    font-size: 26px;
  }
}

@media only screen and (max-width: 425px) {
  .al-articles-tags-chip-list-container {
    display: block;
    width: 300px;
    padding-top: 115px;
  }

  .al-text-before-search {
    font-size: 26px;
  }

  .al-search-input-container {
    flex: unset;
  }
}
    </style>
</head>
<body>
    <div class="al-articles-tags-chip-list-container">
        <div class="al-text-before-search">
          <span>I WOULD LIKE TO SEE</span>
        </div>
        <div class="al-search-input-container">
          <mat-form-field class="al-articles-tags-chip-list">
            ....
          </mat-form-field>
        </div>
      </div>
</body>
</html>
0 голосов
/ 11 мая 2020

Я решил эту проблему. В моих настройках дисплея масштаб ноутбука был 125% вместо 100%. Спасибо за помощь!

0 голосов
/ 05 мая 2020

Мое решение этой проблемы раньше состоит в том, что вам нужно создать еще один файл css, а затем поместить туда свой код @media query со значением 425px width.

например: 

Style3.css    /* Your file name created */

и введите следующий код: 

@media only screen and (max-width: 425px) {
  .al-articles-tags-chip-list-container {
    display: block;
    width: 300px;
    padding-top: 115px;
  }

  .al-text-before-search {
    font-size: 26px;
  }

  .al-search-input-container {
    flex: unset;
  }
}

Пожалуйста, дайте мне знать, работает ли это для вас. Спасибо

...