Проблема пустяковая, но всё же очень тормозит процесс. Дело в том, что media-queris на разрешениях экрана до 500px сразу применяются, а media-queris на 320px очень долго или вообще не применяется. В чём может быть причина?
-
я пошарился и выяснил, что разрешение просто не применяется, а применяется то, которое было предыдущее– Asen1234 мар 2020 в 12:27
-
думаете. без примера кода всё тут же бросятся строить догадки? )– Quazimorda4 мар 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 должен быть красным, но он зелёный– Asen1234 мар 2020 в 12:36
-
1Поменяйте запросы местами. Так как второй запрос шире до 700px, то сначала надо указывать его. А потом более узкий до 576px.– Quazimorda4 мар 2020 в 12:47
Добавить комментарий
|
1 ответ
Раз вы хотите, чтобы при меньшем значении ширины окна у вас менялись стили, то медиа-запросы следует указывать в порядке уменьшения ширины. Как-нибудь так:
media only screen and (max-width: 700px) {
#test {
color: green;
}
}
media only screen and (max-width: 576px) {
#test {
color: red;
}
}