D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2016 год

RSS лента новостей, Подписка по Email

      Как сделать адаптивный дизайн не видимым при уменьшении ширины экрана на десктопе

         Или различие между медиа-запросами @media screen and (max-width: 775px) и @media (max-width: 775px).

(29.09.2016 blogger) Адаптация сайта tr-pl.ru - Работа на да адаптивным дизайном - в процессе

         Это немного забавный вопрос, так как адаптивным дизайном я занимаюсь уже года два. Но так привык писать @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. Для этого есть резиновая верстка

         
         
Главная, 1,
( 44 )