Адаптивная верстка freask.ru

Screen_192009_12-50-04 (2)Всем привет!

Я много пишу про адаптивную верстку и мобильные версии сайта.

Ввиду этого мне конечно же было неудобно осознавать что мой сайт открывается убого на мобильных телефонах и мне очень хотелось его преобразить, сделать адаптивным.

И вот наконец я готов представить вам обновленный адаптивный сайт

Все необходимые адаптивные условия были реализованы через великий механизм Media Queries, позволяющий подключать различные стили в зависимости от параметров устройства. В данном случае основным параметром. влияющим на отображение является разрешение экрана.

Вы можете проверить как изменяется расположение и размеры элементов, если менять ширину окна браузера, попробуйте перетащить один край окошка.

Сначала полная версия сменится на версию 800 пикс, где меняется расположение блоков (на главной странице), а потом сайт сжимается до ширины 400 пикселей и очень симпатично смотрится на смартфоне.

 

 

В коде моего сайта можно увидеть следующее:

 

Это медиазапрос, который активируется только после того как ширина окна (или размер экрана) является меньше 1000 пикселей.В результате мы можем поменять любой стиль и подогнать его к нужному размеру экрана.
Правда есть одна сложность – необходимо предусмотреть расположение элементов в HTML коде, т.к. оно должно оставаться неизменным, мы не можем повлиять на последовательность HTML элементов через медиа запросы.

В общем-то ничего сложно, однако далеко не все задачи можно решить с помощью медиа запросов (media queries). Например могу сказать что media queries resolution не обрабатывается в Iphone 4s и Ipad, в результате чего мы не можем ориентироваться на количество точек на дюйм. А ведь это очень важно, т.к. часто возникает ситуация, когда нужно показывать десктоп-версию на устройстве с разрешением, меньше чем у планшета. Более подробный обзор медиа запросов и возможностей для адаптивной вёрстки – в ближайшее время опишу в отдельной статье.

 

 

Опубликовано: 19.09.2014