Без сомнения адаптивный дизайн становиться необходимым навыком в арсенале любого дизайнера. Для новичков адаптивный дизайн может показаться чем то сложным но на самом деле он гораздо проще чем вы думаете. Чтоб помочь вам быстро разобраться и понять что к чему, я написал этот туториал. Я вам обещаю что вы сможете понять логику адаптивного дизайна если будете следовать трем простым шагам.
Шаг 1. Мета тэги
Большинство мобильных браузеров масштабирует страницу таким образом, чтобы она полностью поместилась на экране. Чтобы избежать такого поведения нужно использовать специальный мета-тэг. Тэг с именем viewport какраз и сообщает браузеру о том, что надо использовать ширину экрана устройства и не стоит производить никакого масштабирования. Итак первый шаг -- добавление этого тега в ваш блок <head> :
ИЕ8 не поддерживает media query, так что вам прийдеться использовать media-queries.js или respond.js чтобы обеспечить их поддержку браузером.
Шаг 2. Структура HTML
В этой статье в качестве примера я буду использовать простую страничку с заголовком, блоком для контента, сайдбаром и футером. Заголовок имеет фиксированую высоту 180px, контент будет шириной в 600px, а сайдбару мы зададим ширину в 300px.
Шаг 3. Media Queries
CSS3 Media Queries это неимоверно удобная штука для адаптивного дизайна. Это что-то вроде условий для браузера, которые указывают как рисовать страничку в зависимости от размера экрана.
Следующий набор правил сработает если экран будет 980px в ширину или меньше. Тут нет ничего сложного - мы просто переводим ширину наших эллементов из пикселей в проценты:
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap{
width: 94%;
}
#content{
width: 65%;
}
#sidebar{
width: 30%;
}
}
При экране шириной 700px и меньше для #content и #sidebar мы ставим ширину в auto и убираем float, чтоб они отображались в полную ширину.
/* for 700px or less */
@media screen and (max-width: 700px){
#content, #sidebar{
width: auto;
float: none;
}
}
И наконец для экранов с шириной 480px и меньше (мобильники), ставим высоту #header в auto, уменьшаем размер шрифта H1 до 24px и прячем #sidebar
/* for 480px or less */
@media screen and (max-width: 480px){
#header{
height: auto;
}
h1{
font-size: 24px;
}
#sidebar{
display: none;
}
}
Хотя в статье я и использовал только три media query вы можете их писать столько, сколько посчитаете нужным. Цель media query -- задать нужные стили и добиться правильного расположения эллементов для разных размеров экрана. Media query записуются в обычный CSS файл.
Заключение
Целью этой статьи являеться показать основы адаптивного дизайна. Если вы хотите углубиться в эту тему, то пишите об этом в комментариях и я обязательно выложу что-нибудь интересное.
