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

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

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

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

Источник: Уроки CSS на Хабрахабре

Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.

Наш специалист ответит вам в течении суток.

28 октября 2018 0 389 Уроки CSS на Хабрахабре, habrahabr.ru, CSS Версия для печати