0

Проблема пустяковая, но всё же очень тормозит процесс. Дело в том, что media-queris на разрешениях экрана до 500px сразу применяются, а media-queris на 320px очень долго или вообще не применяется. В чём может быть причина?

4
  • я пошарился и выяснил, что разрешение просто не применяется, а применяется то, которое было предыдущее
    – Asen123
    4 мар 2020 в 12:27
  • думаете. без примера кода всё тут же бросятся строить догадки? )
    – Quazimorda
    4 мар 2020 в 12:28
  • media only screen and (max-width: 576px) {#test{color:red;}} media only screen and (max-width: 700px) {#test{color:green;}} По идее при разрешении 300px цвет #test должен быть красным, но он зелёный
    – Asen123
    4 мар 2020 в 12:36
  • 1
    Поменяйте запросы местами. Так как второй запрос шире до 700px, то сначала надо указывать его. А потом более узкий до 576px.
    – Quazimorda
    4 мар 2020 в 12:47

1 ответ 1

0

Раз вы хотите, чтобы при меньшем значении ширины окна у вас менялись стили, то медиа-запросы следует указывать в порядке уменьшения ширины. Как-нибудь так:

media only screen and (max-width: 700px) {
  #test {
    color: green;
  }
}

media only screen and (max-width: 576px) {
  #test {
    color: red;
  }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.