Хабрахабр

[Из песочницы] Responsive design: сохранение формы элементов разметки

Одним из приемов адаптивного веб-дизайна является установка размеров элементов разметки
в процентах относительно размеров контейнера их содержащего. Тем самым достигается пропорциональное изменение размеров всех элементов при изменении размеров окна браузера. Если задаются только горизонтальные размеры, как, например, при верстке страницы, когда важно правильно разместить элементы по горизонтали, мы можем очевидным образом предсказать, каковы будут действительные горизонтальные размеры элементов. При этом однако, наверное, мы ничего заранее не можем сказать об их вертикальных размерах (конечно, если высоты не заданы явно). Отсюда вытекает следующая задача — как сохранять пропорции элементов?

Страница состоит из трех колонок: левое вертикальное меню, картинка, правое вертикальное меню. Простой пример из практики.

В свою очередь пункты меню должны быть представлены квадратными областями, которые при изменении размеров окна должны оставаться квадратными: При изменении размеров окна картинка должна растягиваться (сжиматься), оставаясь в пространстве между левым и правым меню.

image
Мы можем представить нашу страницу двумя неупорядоченными списками и изображением посредине:

<ul class="left-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul> <div class="picture"> <img src="img/fox.jpg"> </div> <ul class="right-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul>

установив ширину списков по 4%:

.left-navigation, .right-navigation { width: 4%; list-style: none; float: left; padding-left: 0; margin: 0;
} .right-navigation { float: right;
} .left-navigation li, .right-navigation li { border: 1px solid black; cursor: pointer;
}

и картинки 92%:

.picture .picture img { width: 100%;
}

В результате страница будет выглядеть таким образом:

Это естественно, потому что все, что мы сделали, — установили ширину меню в процентах, оставив установку высоты пунктов на откуп алгоритму отрисовки. Изображение и меню будут изменять свои размеры при изменении размеров окна, однако
видно, что пункты меню не квадратные.

Они приобретут желаемую квадратную форму, однако верстка утратит адаптивные свойства. Можно, конечно, установить размеры пункта меню явным образом в абсолютных единицах. Просто указать высоту в процентах:

width: 4%;
height: 4%;

тоже не является решением, потому что ширина и высота родительского элемента (а в нашем случае это body), как правило, не одинаковы.

Парадокс заключается в том, что данное утверждение справедливо не только в отношении горизонтальных отступов: Решение подобной задачи основывается на том отчасти парадоксальном факте, что отступы (paddings) внутри элемента разметки, если они выражены в процентах, рассчитываются относительно ширины этого элемента.

padding-left, padding-right

, но также и вертикальных отступов:

padding-top, padding-bottom

Следующее, что нам понадобится, — псевдоселектор ::after. Он добавит внутрь нашего растягиваемого по ширине элемента псевдоэлемент нулевой высоты. Если же мы зададим для этого псевдоэлемента padding-top или padding-bottom равным 100%, то значение отступа установится равным ширине родителя (растягиваемого элемента, — li в нашем случае).

.left-navigation li:after, .right-navigation li:after { content: ''; display: block; padding-bottom: 100%;
}

В результате высота растягиваемого элемента станет равной его ширине и пункты меню станут квадратными:

Чтобы добавить содержимое внутрь пункта меню, используем абсолютное позиционирование:

.left-navigation li a, .right-navigation li a { position: absolute; margin-left: 2%; margin-top: 2%;
} .left-navigation li a img, .right-navigation li a img{ transform: translate(-50%, -50%);
}

В результате страница примет желаемый вид:

И самое главное — пункты меню останутся квадратными при изменении размеров окна.

Теги
Показать больше

Похожие статьи

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть