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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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