Создание «резинового» сайта для разных разрешений экрана

 Монитор А     Монитор B
 _ _ _ _ _ _   ___ ___ ___
|_|_|_|_|_|_| |   |   |   |
|_|_|_|_|_|_| |___|___|___|
|_|_|_|_|_|_| |   |   |   |
|_|_|_|_|_|_| |___|___|___|
|_|_|_|_|_|_| |   |   |   |
|_|_|_|_|_|_| |___|___|___|

Эти картинки представляют два монитора одного размера (с одинаковой видимой областью), работающие при разных разрешениях. Монитор А работает при большем разрешении, чем монитор В, и поэтому отображает большее число более маленьких пикселов.

Фиксированные таблицы против относительных

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

Чтобы это проиллюстрировать, рассмотрим такой пример. Если вы создаете таблицу из четырех ячеек, каждая шириной в 100 пикселов, эта таблица будет фиксированной, так как заданы точные размеры. Ширина таблицы всегда будет равна 400 пикселов (4×100). Напротив, если создать таблицу из четырех ячеек, ширина которых будет равна 25% от общей ширины экрана, ширига таблицы в пикселах будет зависить от текущего разрешения экрана.

Например, если установлено разрешение 800×600, каждая ячейка таблицы будет иметь ширину 200 пикселов. Ширина всей таблицы будет равна 800 пикселам. Если ту же самую таблицу смотреть при разрешении 1024×768, то она будет шире. Каждая ячейка будет иметь ширину 256 пикселов, а ширина таблицы будет равна 1024 пиксела.

Каждый способ имеет свои преимущества и недостатки. С фиксированными таблицами проще работать, так как не придется беспокоиться об изменении размеров таблицы у разных посетителей страницы.

Все элементы таблицы должны быть полностью загружены перед тем, как браузер начнет их отображать. При использовании фиксированных таблиц, дизайнер может заставить браузер начать отображать данные в таблице, не дожидаясь их полной загрузки. Для этого применяется следующий стиль CSS:

<table style="table-layout: fixed">

Главным недостатком использования фиксированных таблиц является неиспользование драгоценного пространства при высоких разрешениях экрана.

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

Текст: пикселы против пунктов

Как было сказано выше, пиксел является основной единицей измерения разрешения экрана. Поэтому, все, что имеет отношение к размеру монитора, считается в пикселах. Стандартной единицей измерения размера шрифта является «пункт». Изначально она использовалась в печати и не предназначалась для использования в cети.

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

На какое разрешение ориентироваться?