От автора: обращали когда-нибудь внимание, что при изменении размера окна браузера в открытом Gmail (или Asana, или других сайтов) элементы экрана автоматически изменяют свой размер с плавной анимацией? Такое можно сделать с помощью JavaScript’а или jQuery, а можно – с применением переходов CSS3 и селекторов @media.
Введение в селекторы @media
Если вы имели дело с адаптивным дизайном, то, возможно, уже знакомы с селекторами @media. Если нет, то знайте, что они по своей сути являются способом применения специальных классов CSS к различным видам экранов и разрешений. Это означает, что можно приспособить один и тот же сайт и его содержимое так, чтобы они смотрелись совершенно по-разному на экранах разного размера или в разных устройствах. Посмотреть полный список разных условий можно здесь
1 2 3 4 5 6 7 8 9 10 |
@media only screen and (min-width: 480px) { } @media only screen and (min-width: 600px) { } @media only screen and (min-width: 768px) { } @media only screen and (min-width: 992px) { } @media only screen and (min-width: 1382px) { } |
Я обычно пользуюсь «заготовкой» 320 и более от Эндрю Дойла (Andrew Doyle).
Методология «320 и более» состоит в том, что по умолчанию вы создаете дизайн самого маленького разрешения (320px), а затем выстраиваете на его основе каждое более высокое разрешение экрана. Я считаю, что это ведет к более чистому и пригодному в применении CSS.
Переходы CSS3
Переходы CSS3 меняют поведение смены стиля или свойства так, что оно становится анимацией. Можно задать ‘width’, и при любом изменении ширины элемента будет запускаться анимация определенной протяженности. На анимацию можно настроить множество других свойств, все что угодно, от ширины и высоты до фонового цвета. Если захотите побольше узнать о переходах, можете почитать здесь несколько моих статей.
Для этого учебника я обработал простую домашнюю страницу. При большом разрешении она состоит из двух колонок, навигации слева и содержимого справа с верхним колонтитулом. После применения медиаселекторов на более маленьких экранах навигация находится вверху, а контент – внизу. С помощью следующего класса CSS3 при изменении размера браузера элементы меняют свой размер через определенный период времени (1 секунда для ширины и 1,5 секунды для левой стороны)
1 2 3 4 5 6 7 |
section, h1, li, img { -moz-transition: width 1s ease-in-out, left 1.5s ease-in-out; -webkit-transition: width 1s ease-in-out, left 1.5s ease-in-out; -moz-transition: width 1s ease-in-out, left 1.5s ease-in-out; -o-transition: width 1s ease-in-out, left 1.5s ease-in-out; transition: width 1s ease-in-out, left 1.5s ease-in-out; } |
Посмотреть демо-страницу можно здесь, попробуйте менять размер окна вашего браузера и увидите разную анимацию.
Для тестирования адаптивного дизайна я считаю бесценным инструментом адаптивный тест Мэтта Керсли (Matt Kersleys).
Автор: Jonny Schnittger
Источник: //www.developerdrive.com/
Редакция: Команда webformyself.