Задать вопрос
FreeTibet
@FreeTibet
dharma supplier

Объясните пожалуйста поведение Media Queries?

Есть такой код:
@media (min-width: 320px) { 
	.container {
		width: 1024px;
	}
}

@media (min-width: 1024px)  { 
	.container {
		width: 1124px;
	}

}


Насколько я понимаю, что код должен работать так:
1) для всех устройств с разрешением экрана в диапазоне: 320px-1023px устанавливаем ширину контейнера 1024px
2) В случае если разрешение экрана больше или равно 1024px устанавливаем ширину контейнера 1124px

Однако, второе правило срабатывает только при установке разрешений начиная 1127px.
Разрешения проверяю в отладчике хрома и вообще не понимаю, почему так происходит

Update: я создал чистый html файл и проверил как будет работать данный media queries - все отрабатывает как нужно.
А на рабочем проекте набблюдаю вышеописанное поведение, и в отладчике я не вижу никаких css правил, которые бы влияли на мой код.
Пример: take.ms/n8DrX и take.ms/2KNsW

как так?
  • Вопрос задан
  • 402 просмотра
Подписаться 1 Оценить 2 комментария
Решения вопроса 1
FreeTibet
@FreeTibet Автор вопроса
dharma supplier
В общем, нашел причину.
Причина была в том, что на вкладке, на которой я тестировал проект в барузере был установлен масштаб 110%.
И оказывается масштаб влияет на поведение media queries и дает такое поведение.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
whoisthere
@whoisthere
Не благодари. Жми «Нравится»
Ваш пример
С кодом

Ширину контейнера, намеренно сделал меньше для наглядности. Все работает.
Может вы путаете CSS PX WIDTH и DEVICE PX WIDTH ?
Чтоб Ваши медиа запросы отработали, они должны грузится последнюю очередь иначе их перекроет дефолтный CSS.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы