Советы по макету с фиксированной шириной

· Располагайте основное содержание страниц сайта слева, чтобы пользователям с мониторами 640×480 не приходилось прокручивать сайт по горизонтали для нормального чтения;

· Обеспечьте сайт небольшими таблицами стилей для поддержки портативных небольших (портативных) устройств. Будет замечательно, если вы создадите также таблицы стилей для поддержки проекторов и телевизоров.

Пример блока фиксированной ширины:

<div style="width:500px; font-weight:bold; text-align:center; color:#c90;

background-color:#f7fbf3; border:1px solid #9c6; margin:0 auto; padding:10px">

<p>Этот <code>блок</code> имеет фиксированную ширину 500 пикселей. У него нельзя изменить размер, при увеличении текста, он будет заново разбиваться на строки внутри этого блока.</p>

</div>

Резиновые макеты

Резиновый макет получается, если у основного контейнера не задавать ширину вообще (по умолчанию будет 100%) или задать ширину в процентах. Другими словами, не учитывая границы и отступы, сайт, имеющий ширину 100% будет занимать всю видимую часть экрана, не создавая горизонтальной полосы прокрутки.

Примером такого макета может служить GrayBit.com. Он уменьшается по ширине до 755 пикселей до того, как появляется горизонтальная полоса прокрутки, но и при этом она не требуется для просмотра основного содержимого страниц. Фактически, сайт замечательно смотрится вплоть до ширины в 560 пикселей, дальше элементы дизайна уже начинают перекрываться, пропадать или сваливаться вниз. Большинство резиновых макетов имеют такие ограничения и, как я видел, некорректно ведут себя на мобильных устройствах, пока не отключены стили вообще или не применена специальная таблица стилей для мобильных устройств.

Не нашли, что искали? Воспользуйтесь поиском: