Статьи о разработке и продвижение сайтов

Адаптивная верстка сайта

Создание адаптивного дизайна довольно популярно в последнее время, это связано с его востребованностью и постоянно увеличивающимся количеством мобильных устройств, имеющих доступ к сети Интернет. Большинство профессиональных разработчиков уже давно изучили основы адаптивного дизайна сайтов, поэтому новичкам стоит усвоить основные приемы отзывчивого веб-дизайна, что бы идти в ногу со временем.
Весь смысл адаптивного веб-дизайна, это отображение элементов сайта относительно разрешения экрана. При изменении разрешения экрана, то есть просмотра сайта на мобильном устройстве, размер основных элементов сайта изменялся соответственно разрешению экрана или изменялось положение элементов на странице.
Основным и наиболее распространенным способом применения адаптивного веб-дизайна является масштабирование контейнеров с контентом, относительно ширины страницы. Такой способ достигается применением в каскадных таблицах стилей небольшого кода .container { width: 800px; max-width: 90%; }, который описывает контейнер <div> с классом container. Используя такой код в css, можно изменять разрешение экрана и видеть, как будут изменяться размеры контейнеров с их содержимым.
Примерно таким же способом масштабируются изображения, правда для них код будет несколько иной. img { max-width: 100%; height: auto; }такой код css так же изменяет размер изображения относительно разрешения экрана. В данном примере размер изображения будет занимать 100 процентов от ширины экрана.
Используя адаптивный дизайн, обязательно нужно обратить внимание на размер шрифтов, он тоже должен быть относительным. Относительный размер шрифта устанавливается так в классах css свойством font-size: 80%. Стоит отметить, что значения межстрочных интервалов и отступов наследуют значение родителя.
При оформлении больших блоков текстового контента можно использовать свойство css позволяющее переносить текст на следующую строку при уменьшении разрешения экрана. То есть, когда текст начинает выходить за пределы экрана, он переносится на новую строку. Реализуется это свойством word-wrap: break-word;, которое часто используется в css 3.
Применяя на созданном сайте адаптивный дизайн, нужно знать, что некоторые браузеры пока еще не поддерживают абсолютно все технологии и свойства css 3, на базе которого реализуется адаптивный дизайн. Для того, что бы избежать некорректного отображения дизайна нужно использовать специальные стили, которые описывают или заменяют свойство css при просмотре с того или иного браузера.

Интересные статьи

Чистка семантического ядра от «мёртвых» запросов

Интересные статьи | (Закрыть)