Адаптивная верстка freask.ru
Я много пишу про адаптивную верстку и мобильные версии сайта.
Ввиду этого мне конечно же было неудобно осознавать что мой сайт открывается убого на мобильных телефонах и мне очень хотелось его преобразить, сделать адаптивным.
И вот наконец я готов представить вам обновленный адаптивный сайт
Все необходимые адаптивные условия были реализованы через великий механизм Media Queries, позволяющий подключать различные стили в зависимости от параметров устройства. В данном случае основным параметром. влияющим на отображение является разрешение экрана.
Вы можете проверить как изменяется расположение и размеры элементов, если менять ширину окна браузера, попробуйте перетащить один край окошка.
Сначала полная версия сменится на версию 800 пикс, где меняется расположение блоков (на главной странице), а потом сайт сжимается до ширины 400 пикселей и очень симпатично смотрится на смартфоне.
В коде моего сайта можно увидеть следующее:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@media only screen and (max-width: 1000px) { body { min-width: 805px; } .mainWrap #main { overflow: hidden; width: 805px; } ..... } |
Это медиазапрос, который активируется только после того как ширина окна (или размер экрана) является меньше 1000 пикселей.В результате мы можем поменять любой стиль и подогнать его к нужному размеру экрана.
Правда есть одна сложность – необходимо предусмотреть расположение элементов в HTML коде, т.к. оно должно оставаться неизменным, мы не можем повлиять на последовательность HTML элементов через медиа запросы.
В общем-то ничего сложно, однако далеко не все задачи можно решить с помощью медиа запросов (media queries). Например могу сказать что media queries resolution не обрабатывается в Iphone 4s и Ipad, в результате чего мы не можем ориентироваться на количество точек на дюйм. А ведь это очень важно, т.к. часто возникает ситуация, когда нужно показывать десктоп-версию на устройстве с разрешением, меньше чем у планшета. Более подробный обзор медиа запросов и возможностей для адаптивной вёрстки – в ближайшее время опишу в отдельной статье.