Как сделать адаптивный дизайн не видимым при уменьшении ширины экрана на десктопе
Или различие между медиа-запросами @media screen and (max-width: 775px) и @media (max-width: 775px).
Это немного забавный вопрос, так как адаптивным дизайном я занимаюсь уже года два. Но так привык писать @media screen and (max-width, что никогда не обращал особого внимания на вариант записи в примерах от Гугла: @media (max-width. И, как оказалось, зря не обращал. Это довольно интересно.
Начнем с того, что существует целая гора медиа-запросов и медиа-функций. Например, вот такая запись @media all and (orientation: landscape) - стили для всех устройств с альбомной ориентацией. Но, так как я всегда ориентируюсь от ширины экрана, я продолжал использовать удобное @media screen and (max-width - стили применяются для устройства с шириной экрана 775px и ниже.
В чем же отличие более короткого @media (max-width: 775px)?
Сегодня, работая над заказом по адаптивной верстке сайта tr-pl.ru был найден довольно простой ответ, стоивший определенной задержки в работе.
Эти стили не отображаются при уменьшении окна браузера. Они работают только на (мобильном?) устройстве или его эмуляции.
Получается, что это ну о-о-очень круто, но, при этом, довольно бесполезно. Это я скажу сразу, как любитель просматривать сайты в отдельном узком окне в браузера. Но оно поможет тем, кто ни в коем случае не хочет показывать «мобильную» или «планшетную» версию на десктопе (большом экране стационарного компьютера). Даже если она не входит в окно браузера.
И еще одно. В примере не зря использована ширина в 775 пикселей. Это моя любимая ширина экрана, примерно отделяющая все мобильные устройства (включая Айпад в вертикальном положении) от нормальных планшетов и портативных компьютеров.
Ведь жутко бесит, когда у тебя кран шириной больше 2000, но тебе постоянно показывают мобильную версию под экран 320 - 350px. Для этого есть резиновая верстка