Вопрос:
Я настраиваю таблицы стилей для адаптивного веб-сайта и хочу предоставить различные макеты для экранов с шириной> = 768 пикселей и экранов с шириной <768 пикселей. Однако, когда я использую @media (max-width: 767px), на 767px и 768px влияет содержание медиазапроса.
Я попытался использовать @media (max-width: 768px) вместо этого, но он (как и ожидалось) применил содержимое медиазапроса к 768px, что не является необходимым результатом.
Вы можете попробовать этот код на любой странице (я пробовал его в Firefox и Chrome, с теми же результатами):
body { background: red; } @media (max-width: 767px) { body { background: green; } }
Я создал скрипку, где вы можете увидеть проблему: https://jsfiddle.net/e0hdyqc9/
Когда вы добавляете эти правила на страницу, 767px и 768px выделяются красным. Однако, если вы попытаетесь заменить 767px на 768px, вы обнаружите, что теперь и 767px, и 768px имеют зеленый цвет! Как это возможно?
Лучший ответ:
Поместите это в заголовок страницы:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
Добавьте этот CSS:
@media only screen and (max-width: 767px) { body { background-color: green; }} @media only screen and (min-width:768px) { body { background-color: yellow;}}
Красный фон не будет отображаться из-за минимальных и максимальных значений!
Когда width=767px зеленая, а width=768px желтая, места для красного не будет.
