Дано: макет сайта на 3 разрешения-
320рх, 768рх и 1200рх. Верстаю mobile first.
На данный момент переменные для медиа запросов такие:
@tablet: ~"screen and (min-width: 768px)";
@desktop: ~"screen and (min-width: 1200px)";
Соответственно, сначала прописываю стили по умолчанию, затем для
@tablet и
@desktop. Для мобильника и десктопа всё отображается нормально.
Проблема с планшетом, в вертикальном положении проблем нет, но при повороте в горизонтальное, контент отображается как для десктопа, хотя разрешение планшета 768х1024.
Подскажите, пожалуйста, как правильно прописать media queries, чтобы решить проблему.
inb4: Прочитал уже кучу материала про media queries, но то ли материалы непонятные, то ли во мне дело, так как каша в голове стала только гуще.
Простой
Простой