В математике не силен,
Купил за 5, продал за 10,
Так и живу на 2%...
Проценты бич верстальщика…

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

Тема не избитая, еще многое предстоит решать, плохо то, что ни W3C, ни производители браузеров по настоящему всерьез, этой проблемой не озадачивались.

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

Нельзя сказать, что никто не задумывается и не ищет подходов, но все это носит бессистемный характер, по большей части сплошной "гламур", как я его называю.

Нет концепции.

А вот заблуждений на этот счет не счесть.

Скажем, есть очевидная проблема, если быть точным то две, как минимум, суть их в следующем.

Стандартная трех колоночная разметка.

Что она представляет собой в большинстве случаев?

1 ***

Боковые колонки имеют фиксированную ширину, область контента, почти всегда с небольшим люфтом так, как основной контейнер ограничен по ширине с помощью min/max-width.

Допустим, при нынешнем дефолте - диагональ 17”, разрешение 1024*768, страница занимает все доступное место.

При переходе на иное разрешение, к примеру - 1600*900, если наша страница не ограничена на уровне 1280px, как рекомендуют, из-за плавающей ширины центральной части, разметка превращается в черт знает что.

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

Даже если страница по min/max-width, все-таки будет ограничена на уровне 1280px, пропорции не соблюдаются, как на этом разрешении, так и на разрешениях выше.

Смотрим. Одна и та же разметка - в первом случае макет с фиксированной шириной в 1000px, следующий ограничен по max-width:1280px, третий - max-width:100%.

Выбираем разрешение экрана монитора в диапазоне от 1024*768 до 1600*900.

Думаю, ни у кого не возникнет иллюзий, насчет того, что проблема, озвученная чуть выше, имеет место быть.

Выход в данном случае один - все колонки должны иметь плавающую ширину.

Самый подходящий вариант, все размеры в процентах, но так ли все просто с ними?

Давайте посмотрим.

Основа та же - разметка, из предыдущих примеров.

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

Итак, основа имеется, но это еще не все.

2 ***

С горем по полам мы заставили макет худо-бедно динамически подстраиваться под диагональ и разрешение экрана монитора без участия пользователя.

А вот, как быть с размером шрифта?

Указание оного таким образом - body {font-size:100%;} не решает проблем, а предлагать пользователю для увеличения размера шрифта понажимать какие-то кнопочки, по меньшей мере, глупо.

Хотелось бы следующего.

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

С помощью "Каскадных таблиц стилей", задача, похоже, не имеет решения.

Тут нужно сделать не большое отступление.

Многие гуру от верстки, чтобы они о себе не думали, проповедуют политику двойных стандартов.

Это касается использования JavaScript для разметки каркаса страницы. Причем во всем остальном наличие скриптов их не пугает, и лепят их они, где надо и не надо.

Отчего так затрудняюсь ответить, субъективно, скорее всего, от не желания заниматься проблемами всерьез, это ж, сколько надо времени потратить, лучше поспамиться по блогам, блеснуть знаниями на форумах, тут его хватает, но ни на что другое уже просто не остается.

Обратите внимание на последний пример. При разрешении 1600*900, текст читать затруднительно, в body стоит font-size:100%, к тому же в колонке будет меню, а ему-то практически всегда задают фиксированный размер.

Картинка так себе. Колонка стала шире, размер шрифта меньше, ни о каком соблюдении пропорций речи не идет.

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

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

И вот тут можно сказать, что крупно повезло.

Читаем: "Умные динамические колонки с применением CSS и jQurey".

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

За что еще раз выражаю признательность и благодарность.

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

Програмисты на JS окликнетесь, окажите посильную помощь в решении не тривиальной задачи.

Главное начало положено, теперь дело практической проверки в реальных условиях web’a.

Вообше, идеальным решением было бы то, если бы данная фишка была бы изначально встроена в движок браузера, но когда еще "расчухают" необходимость этого производители браузеров не известно, а жаль…

И не забыли бы они о процентах, свели бы к единому знаменателю, плеваться хочется, во все стороны, без остановки :(

Не знаю, приживется ли идея или это мертворожденный ребенок, но пока я от этого в прекрасном расположении духа :)

Даю линк на пример выложенный Дмитрием, смотреть на разных разрешениях, а также играем размерами окна браузера, как только он напишет обещанную статью по поводу, будут и мои вариации на тему.