Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой — использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.
У каждого из этих решений есть свои плюсы и минусы, хочу заострить внимание на минусах, так как обычно именно между двух зол именно в отражении минусов этих решений приходится выбирать.
Фиксированная ширина макетной сетки
Вёрстку загоняют в горизонтальный габарит 960—980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко — тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.
«Резиновая» макетная сетка по ширине окна
Опять же при больших горизонтальных размерах окна есть другая проблема: строки текста становятся очень длинными, и читать их становится совсем не так комфортно, как хотелось бы.
Ещё одна распространённая проблема этого решения — боковые отступы при больших горизонтальных размерах окна уже не так удачно визуально согласуются с горизонтальными размерами элементов, что также не добавляет комфорта при взгляде на свёрстанный макет.
Хочу предложить нехитрый вариант решения — ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.
Создаём контейнер макета:
<html>
<head>
...
</head>
<body>
<div class="page_container">
...
</div>
</body>
</html>
Оформляем его незатейливым кодом стиля:
div.page_container {
min-width: 960px;
max-width: 75%;
margin: 0 auto;
padding: 0;
}
Однако этого решения кому-то может показаться мало в силу того что при очень больших горизонтальных размерах окна опять проявляются проблемы с длиной строк. Это решается настолько же простым дополнительным приёмом: создание дополнительного внешнего контейнера внутри уже описанного и ограничение его максимальной ширины фиксированным значением (мне субъективно кажется, что лучше всего подходят значния в диапазоне 1400—1600 пикселей). Опять же используем лишь средства CSS 2.0.
Дополняем HTML:
<html>
<head>
...
</head>
<body>
<div class="page_container">
<div class="page_inner_container">
...
</div>
</div>
</body>
</html>
И немного меняем CSS:
div.page_container {
max-width: 75%;
margin: 0 auto;
padding: 0;
}
div.page_inner_container {
min-width: 960px;
max-width: 1600px;
margin: 0 auto;
padding: 0;
}
Как видите — решение предельно просто и достаточно универсально, может применяться для любых блочных элементов.
Автор: Pagefest
