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

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

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

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

Войти через центр авторизации
Похожие вопросы