Проблема экранного пространства в CSS

Если вы разрабатываете страницу для печати, вы принимаете во внимание физический размер конечного документа. Например, для пла­ката вы используете больший текст, чем для визитной карточки.

Однако в мире веб-разработки эта система разрушена, потому что пользовате­ли могут использовать на своих мониторах все варианты разрешений экрана и установить все возможные размеры окна браузера.

Такие воз­можности настройки оказывают влияние на то, какое количество реаль­ного места на экране должна занимать ваша веб-страница. Чем выше разрешение монитора и больше окно браузера, тем больше содержимого вашей веб-страницы помещается на экране. Это провоцирует возник­новение дилеммы — как вы можете убедиться в том, что ваши страни­цы выглядят отлично, если вы не знаете, каковы параметры мониторов у ваших посетителей?

Когда веб-разработчики сталкиваются с этой проблемой при оформ­лении страницы, они используют две основные стратегии.

•    Добиваются гибкости с помощью пропорциональной калибровки.

При задании пропорциональных размеров содержимое страницы расширяется или сжимается в соответствии со свободным простран­ством в окне браузера. Например, при создании пропорционально откалиброванной веб-страницы с фиксированной строкой меню и переменной областью с содержимым ширина строки меню не ме­няется, в то время как область содержимого увеличивается или сжи­мается в соответствии с размерами окна браузера, независимо от ис­пользуемых размеров окна.

Если вы сомневаетесь в реальном размере вашей веб-страницы, пропорциональная калибровка — это путь, по которому стоит идти, по­скольку он гарантирует, что ваши веб-страницы будут соответствовать любому размеру окна браузера.

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

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

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

Кстати, есть множество профессиональных сайтов, где используют­ся фиксированные размеры страниц, например сайты средств массовой информации, подобно сайту издания Взгляд (vz.ru). Если вы принимаете решение установить фиксированную ширину страницы, вы должны выяснить, каким должно быть значение ширины. Конечно, вы не можете знать два самых важных фактора, влияющие на принятие та­кого решения, — размер окна браузера посетителя и разрешение экрана его монитора. Дело в том, что вы никогда не будете знать наверняка на­стройку окна браузера, но вы можете использовать в своих интересах примеры из жизни для определения разрешения экрана.

Почти половина всех пользователей используют большие монито­ры с разрешением 1024 х 768 пикселов, и большая часть всех остальных (почти 40%) пользуются широкоформатными мониторами с более вы­соким разрешением, например 1280 х 800. По этой причине ваша веб­страница шириной приблизительно 1000 пикселов должна выглядеть замечательно.

Такая ширина — это приблизительно то количество до­ступного пространства окна браузера, которое получает ваша страница, когда посетитель использует разрешение экрана 1024 х 768 и разворачивает окно браузера таким образом, чтобы оно заполняло целый экран.

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