Адаптивная вёрстка сайта — азы

12 декабря 04:11 2012

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

Адаптивный веб-дизайн – это такой вид дизайна сайта, который будет одинаково хорошо смотреться (восприниматься) на большинства устройствах, для сёрфинга в интернете. Это телефоны, планшеты, ноутбуки и даже телевизоры.


Сейчас, сайтов с адаптивной вёрсткой становится все больше и всё чаще заказчики требуют помимо кроссбраузерности сайта, ещё и адаптивность. Но я заметил такую тенденцию, что очень мало верстальщиков хорошо разбираются в этой теме, предпочитая верстать сайты по старым нормам. Я не говорю, что я мега верстальщик, но после долгих поисков верстальщика, мне пришлось самому углубляться для того чтоб понял что такое Адаптивная вёрстка, чтобы сверстать сайт заказчику.

Именно базовые правила и советы я опишу в этом посте.

1. Адаптивная вёрстка (вставка видео) | Демо

Пример создание разметки для вставки видео, чтобы оно масштабировалась в зависимости от разрешения экрана пользователя:

[html]
<div class="video">
<iframe src="http://player.vimeo.com/video/11252579" frameborder="0"></iframe>
</div>[/html]

[css].video {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 54.15%;
}
.video iframe,
.video object,
.video embed {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}[/css]

Чтобы посмотреть на работоспособность кода на странице «Демо», вам надо либо изменять размер окна браузера, либо воспользоваться разрешением для Google Chrome, которое позволит вам просматривать сайт в разных разрешениях.

2. Минимальная и Максимальная ширина бокса

Параметр Max-width поможет нам определять ширину бокса, которая может быть максимальной. В примере ниже, ширина контейнера составляет 700px если это возможно, но не больше 80% от ширины.

[css].con {
width: 700px;
max-width: 80%;
}[/css]

Таким же образом происходит и масштабирование изображений:

[css]img {
height: auto;
max-width: 100%;
}[/css]

Чтобы изменять размер изображений в IE 8 версии, можно воспользоваться вот таким хаком:

[css]@media \0screen {
img {width: auto;}
}[/css]

Так же ещё существует и значение Min-width, как вы уже наверно догадались, это противоположность свойству max-width, она позволяет определить минимальную ширину для бокса.
[sc name=»728 text» ]

3. Относительные значения

Во время адаптивной вёрстки, хорошим тоном для веб-дизайнера, будет использование относительных величин в максимуме свойств страницы. К тому же, можно очень сильно уменьшить код CSS, если использовать относительные значения для таких свойств как margin, padding, размер шрифта и.т.п.

Margin
Вот так выглядят комментарии, при изменение разрешения страницы с адаптивной вёрсткой и без:
Адаптивная вёрстка

Размер шрифта
Во время использования относительных величин шрифта (em или %), по ним так же наследуются относительные величины для межстрочного интервала и отступов:
Адаптивная вёрстка - Размер шрифта

Padding
Тут не буду вдаваться в долгие объяснения, по скриншоту прекрасно видно, как хорошо работают относительные значения для Padding в адаптивной вёрстке сайта.
Адаптивная вёрстка - Padding

4. Перенос слов

В CSS существует свойство, которое разрешает конструкции, переносить слова на новую строчку, иногда это очень сильно выручает, поэтому запишите этот код себе:

[css].word {
word-wrap: break-word;
}[/css]

На этом всё, но а увидеть все примеры, которые описаны в этой статье, вы можете на страничке Демо.
[sc name=»728 text» ]