Отзывчивый дизайн

Отзывчивый (или responsive, или адаптивный) дизайн — новый тренд в разработке веб-сайтов. Ему не исполнилось и двух лет. Нет, конечно, и раньше существовали сайты, способные изменять свой внешний вид в зависимости от размеров экрана устройства, на котором их просматривают, но именно сейчас это явление стало просто повальным. По запросу «responsive web design» Гугл выдает от 30 до 40 миллионов ссылок!

Собственно говоря, поводом для написания этого поста (как и многих последующих) стало обновление дизайна моего блога и планируемая «перезагрузка» ПРЕ. И сегодня я хочу рассказать об очень простом инструменте, с помощью которого я сделал дизайн ПРЕ адаптивным. Это простейший CSS-фреймворк Proportional Grids, позволяющий в считанные минуты очертить схему страницы и запрограммировать её изменение в зависимости от размеров экрана.

В числе его особенностей могу отметить отсутствие класса .first и использование свойства box-sizing. Последнее позволило создать сетку с изменяющейся шириной столбцов, но при этом фиксированным расстоянием между ними. В качестве классов колонок используются интуитивно понятные col-full, col-one-half, col-three-quarters и так далее. По аналогии легко создавать классы для колонок шириной в 1/5 (20%), 1/8 (12.5%) или даже 3/20 ширины страницы (15%). Ну и фиксы для IE 7/8 тоже прилагаются.

Как видите, ничего особенного здесь нет, но лично меня этот фреймворк подкупил своей простотой и удобством использования — не люблю я эти тяжелые бутстрапы и блупринты =)

В общем, если кого-то заинтересовало, то здесь можно посмотреть демо-страницу, а на Гитхабе — скачать.

P.S. Мне показалась неудобной и нелогичной последовательность брейкпойнтов, используемых в Proportional Grids:

@media only screen and (min-width: 30em) {
 ... }
@media only screen and (min-width: 48em) {
 ... }
@media only screen and (min-width: 60em) {
 ... }

Получается, что уточнение ширины блоков идет снизу вверх — для маленьких экранов используется col-, для экранов побольше — bp1-col- и так далее. Мне кажется это не очень удобным, потому что продумывать поведение страницы приходится снизу вверх. Поэтому в моем случае я заменил контрольные точки на

@media only screen and (max-width: 60em) {
 ... }
@media only screen and (max-width: 48em) {
 ... }
@media only screen and (max-width: 30em) {
 ... }

Это позволяет сначала очертить полноценную схему сайта, и только потом уже добавлять нужное поведение для маленьких экранов.

Комментариев к “Отзывчивый дизайн”: 1

Добавить комментарий