Адаптивный дизайн

      Когда верстка фиксированного макета уже не представляет трудности, можно приниматься за адаптивный дизайн. Адаптивный — тот, который подходит к любому размеру экрана. Какие особенности присущи такому типу верстки?

     Для начала нужно сказать, адаптивный дизайн строится на базе гибкой сетки. Гибкие сетки вместо фиксированных размерных единиц используют относительные — это em и %.

     Размер каждого элемента, имея при заданной ширине экрана какое-то значение, может быть выражен в процентах по отношению к ширине экрана. Например, имея ширину экрана 640px, а ширину элемента 160px, можем выразить ширину элемента как (160/640)*100%, то есть 25%. Также можно определить значения размеров других элементов.

     Сетка строится не в абсолютных единицах, как 640px, а в относительных, как 100%. За 100% принимается полная ширина экрана. При пересчете в единицы em можно пользоваться соотношением 1em=16px.

      Создав модульную сетку, значения модулей которой выражены в процентах, несложно сверстать гибкий макет. Нужно различать важный момент, когда используемые значения задаются от родительского элемента, а когда от дочернего. Тем не менее есть очень неприятные размеры экранов, плохо отображающие даже гибкий макет. В этом случае рекомендуется использовать медиа- запросы. Медиа- запросы — запросы, которые могут учитывать особенности ориентации экрана, типа его и другие особенности.

Медиа-контент. При создании гибкого макета особую сложность может создавать встраиваемый медиа-контент. С ним нужно работать одельно в каждом случае. Можно задать определенный размер изображения, например, а затем масштабировать его относительно родительского или дочернего элемента.

Текст. Количество знаков в столбце будет зависеть не только от ширины столбца, но и от выбранного размера шрифта. Поэтому в каждом случае нужно рассматривать соотношение ширины столбца и величины используемого шрифта. За отправную точку можно принять следующие цифры: различные рекомендации предлагают отображать в строке не менее 50 знаков и не более 80. Исходя из этого, строим ширину элемента, содержащего тексты.

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

2017-04-17

◄ Назад