Ver.mod. 05.12.2013
C чего начинается Родина, с картинки в твоём букваре ...

Техника создания Динамично эластичного типа макета для страниц сайта.
Скрипт динамично эластичного масштабирования размера шрифтов текстовых элементов страницы.

Механизм динамично эластичного масштабирования элементов страницы сайта основан на скрипте масштабирования размера шрифта. Его основная функция - пропорциональное динамичное масштабирование размера шрифта заданного в относительных единицах - em, относительно размера окна обозревателя. Скрипт предназначен для масштабирования шрифта, так как динамичная эластичность других элементов, в частности изображений, определяется применением таких единиц измерения значений размеров элементов как проценты - (%) и относительные единицы - (em). Свойства динамичной эластичности шрифта может передаваться и другим элементам страницы сайта - полям ввода данных в формах входа, поиска и почтовых форм.

Содержание материала по скрипту масштабирования

1. Исходный текст скрипта,
2. Описание функций, событий, методов, объектов скрипта,
2.1 Функция событий объекта - document,
2.2 Функция расчёта коэффициента масштабирования - esq(),
2.3 Элементы функции - document.body.offsetWidth/(200-screen.width/document.body.offsetWidth),
2.4 Описание, таблица, график константы 200,
2.5 Таблица значений константы,
2.6 График значений константы,
3. Описание, таблицы, графики функции document.body.offsetWidth,
3.1 Таблицы значений функции document.body.offsetWidth,
3.2 Графики значений функции document.body.offsetWidth,
3.3 Совмещённые графики значений функции,
4. Описание, таблицы, графики функции - document.body.offsetWidth/(200-screen.width/document.body.offsetWidth),
4.1 Таблица функции - document.body.offsetWidth/(200-screen.width/document.body.offsetWidth),
4.2 График функции - document.body.offsetWidth/(200-screen.width/document.body.offsetWidth),
5. События - onload, onresize,
6. Скриншоты отображения страниц на разных мониторах.
1 . Исходный текст скрипта
all systems
Исходный текст скрипта
2 . Описание функций, событий, методов, объектов скрипта
all systems
1. Функция событий объекта - document,
2. Функция расчёта коэффициента масштабирования - esq(),
3. Элементы функции - document.body.offsetWidth/(200-screen.width/document.body.offsetWidth),
4. Описание, таблица, график константы 200.
2 . 1 . Функция событий объекта document
all systems
Строка функции обработчика событий объекта document, метод - addEventListener в строке скрипта -
создает обработчик для события - DOMContentLoaded, который вызывает функцию - esq по завершении загрузки элементов страницы, элементов шаблона страницы и присваивет DOM элементу значение null. Это событие создается, когда завершается загрузка элементов страницы и доступна основная модель DOM.
2 . 2 . Функция расчёта коэффициента масштабирования - esq()
all systems
Функция, значение функции в строке скрипта -
определяет значение коэффициента масштабирования размера шрифта текста. Значение коэффициента пропорционально зависит от размера окна обозревателя и обратно пропорционально от масштаба окна обозревателя.
Во фрагменте строки скрипта - document.body.style.fontSize, элементу - document тела страницы - body присваивается значение стиля style размера шрифта - fontSize как результат значения полученного во фрагменте скрипта, строке функции -
document.body.offsetWidth/(200-screen.width/document.body.offsetWidth).
2 . 3 . Функция - document.body.offsetWidth/(200-screen.width/document.body.offsetWidth)
all systems
Функция, значение функции screen.width, всегда равно разрешению экрана монитора,

Функция, значение функции document.body.offsetWidth, прямопропорционально равно размеру окна обозревателя относительно разрешения экрана монитора и образует линейную составляющую значений функции, отностиельно горизонтального разрешения монитора определяемого значением функции - screen.width.

Одновременно значение функции - document.body.offsetWidth, образует обратно пропорциональную логарифмическую составляющую по значениям в зависимости от масштаба окна обозревателя, относительно горизонтального разрешения монитора определяемого значением функции - screen.width.

Функция, значение функции screen.width/document.body.offsetWidth по умолчанию, при размере окна обозревателя во весь экран всегда равно - 1. Значение функции не зависит ни от значения масштаба окна обозревателя ни от разрешения экрана монитора. Значение функции прямопропорционально зависит только от размера окна обозревателя относительно экрана монитора и может изменяться от 1 в сторону уменьшения.

Константа 200, как уменьшаемое вычитаемым значением результата функции screen.width/document.body.offsetWidth образует делитель для функции document.body.offsetWidth. Результат, значение арифмитических отношений компонентов фукции, определяет значение коэффициента масштабирования размера шрифта текста.
2 . 4 . Описание, таблица, график константы 200
all systems
Значение константы 200 может быть равно и другим значениям, например в пределах от 100 до 1000 с любым шагом градации значения, применмы любые целые значения (95, 111, 209, 707, 998 и прочие). Увеличение значения константы прямопропорционально связано со значениями размера шрифта указываемого в стилях.
В таблице, для прмера, приведены ориентировочные значения константы и соответствующие им "эталонные" значения шрифта. Значения этих пар, влияют на угловой размер шрифта отображаемого на странице. При использовании любой пары, значения константы в скрипте и ориентировочного значения размера шрифта в стилях, угловой размер шрифта отображаемого на странице будет одинаков.
Ориентировочные значения пар, значение константы-значение размера шрифта, приведены в таблице (значения в колонках таблицы). При иных, некратных сотням значениях константы, значения размера шрифтов так же будут иными в соответствии с пропорциональностью пары - значение константы-значение размера шрифта.
Значение константы по величине обратно пропорционально влияет на значение фукции esq (ориентировочные значения в нижней строке таблицы).
2 . 5 . Таблица значений константы
all systems
значение2003004005006007008009001 000
размер em2,203,284,365,586,647,608,789,7611,00
функция esq5.145728643.424749162.566416042.052104201.709515851.464949921.281602001.139043381.02502502
2 . 6 . График значений константы
all systems
Левая вертикльная ось графика-диаграммы:
1. Значения размера шрифта в относительных единицах em, отностительно значения константы (для восходящего графика).
2. Значения функции esq в условных единицах, отностительно значения константы (для нисходящего графика).

Нижняя горизонтальная ось графика-диаграммы - значения константы.

График значений размеров шрифтов и константы (восходящий график) показывает прямую линейную зависимость значений.
График значений функйии esq и константы (нисходящий график) показывает обратную логарифмическую зависимость значений.
Вывод значения размера окна в процентах Функция записанная таким образом - Math.round(document.body.offsetWidth/screen.width*100), умноженная на значение 100 с округлением до целого (Math.round), позволяет получить текущее значение масштаба окна обозревателя в процентах (%), в виде целого, округлённого числа отностительно размера экрана монитора.
3 . Описание, таблицы, графики функции document.body.offsetWidth
all systems
3.1 Таблицы значений функции document.body.offsetWidth,
3.2 Графики значений функции document.body.offsetWidth (логарифмический, линейный),
3.3 Совмещённые графики значений функции.
3 . 1 . Таблицы значений функции document.body.offsetWidth
all systems
Значения функции по исходным: масштаб окна обозревателя/разрешение, логарифмическая составляющая.
масштаб окна в %105%100%95%90%85%80%75%70%65%60%55%50%
разрешение 2048 px196620482160228624282586273029343172345437804096
разрешение 1900 px182419002004212122532399253327222943320135073800
разрешение 1600 px153616001688178618972020213322922478269529533200
разрешение 1346 px129213461421150415961704180019362093227824982708
разрешение 1280 px121912801347142215061600170718291969213323272560
разрешение 1152 px110611521215128613651455153616511784194021272304
разрешение 1024 px98310241080114312141293136514671586172518902048
Логарифмическая обратнопропорциональная последовательность значений отношения масштаб окна обозревателя / разрешение монитора, прослеживается при любых опроных значениях разрешения экрана монитора (любая строка таблицы) в широком диапазоне масштаба. В таблице приведены значения для масштаба в пределах 105% - 50%.
Для построения графиков значений использовались данные значений в более широком диапазоне масштабов - от 105% до 30%.
Значения функции по исходным: размер окна обозревателя/разрешение, линейная составляющая.
размер окна в %105%100%95%90%85%80%75%70%65%60%55%50%
разрешение 2048 px2150,420481945,61843,21740,81638,415361433,61331,21228,81126,41024
разрешение 1900 px19951900180517101615152014251330123511401045950
разрешение 1600 px168016001520144013601280120011201040960880800
разрешение 1346 px1413,313461278,71211,41144,11076,81009,5942,2874,9807,6740,3673
разрешение 1280 px134412801216115210881024960896832768704640
разрешение 1152 px1209.611521094.41036.8979.2921.6864806.4748.8691.2633.6576
разрешение 1024 px1075.21024972.8921.6870.4819.2768716.8665.6614.4563.2512
Линейная прямопропорциональная последовательность значений отношения размер окна обозревателя / разрешение монитора, прослеживается при любых опроных значениях разрешения экрана монитора (любая строка таблицы) в широком диапазоне размера окна обозревателя, выраженного в процентах относительно размера экрана монитора. В таблице приведены значения для масштаба в пределах 105% - 50%.
Для построения графиков значений использовались данные значений в более широком диапазоне масштабов - от 105% до 30%.
3 . 2 . Графики значений функции document.body.offsetWidth
all systems
Логарифмические и линейные графики значений функции для разных разрешений совпадают по характеру кривой графика, отличаясь только значениями. Так как логарифмические и линейные значения функции, опираются на соответствующие исходные разрешения, результат работы скрипта будет абсоютно идентичен во всех случаях. Масштабирование страницы, элементов страницы, элементов относительно друг друга, угловых размеров, будет независимым и постоянным относительно: окна обозревателя, значений масштаба окна обозревателя и разрешения экрана монитора.
3 . 2 . 1 . Логарифмический график
all systems
Описание значений логарифмической составляющей функции.
Левая вертикльная ось графика-диаграммы - ориентировочные значения данных таблиц в пикселях.
Нижняя горизонтальная ось графика-диаграммы - ориентировочные значения масштаба окна обозревателя.
3 . 2 . 2 . Линейный график
all systems
Описание значений линейной составляющей функции.
Левая вертикльная ось графика-диаграммы - ориентировочные значения данных таблиц в пикселях.
Нижняя горизонтальная ось графика-диаграммы - ориентировочные значения размера окна обозревателя.
3 . 3 . Совмещённые графики значений функции
all systems
Совмещённые графики логарифмических и линейных значений функции document.body.offsetWidth с привязкой по значениям разрешения экрана монитора, масштаба обозревателя / масштаба окна обозревателя относительно экрана монитора.
Совокупность лограрифмической и линейной зависимости функции document.body.offsetWidth, от масштаба / размера / разрешения, монитора / окна обозревателя придаёт скрипту:
1. Нечувствительность к масштабу окна обозревателя.
2. Динамичную адаптивность под размер окна обозревателя.
3. Постоянство угловых размеров шрифтов относительно окна обозревателя, независимо от масштаба и размера окна.
Как следствие совокупность всех факторов - эргономичность динамично эластичного типа макета.
4 . Функция document.body.offsetWidth/(200-screen.width/document.body.offsetWidth)
all systems
1. Таблица функции - document.body.offsetWidth/(200-screen.width/document.body.offsetWidth),
2. График функции - document.body.offsetWidth/(200-screen.width/document.body.offsetWidth),
4 . 1 . Таблица функции document.body.offsetWidth/(200-screen.width/document.body.offsetWidth)
all systems
Значения функции по исходным: разрешение/масштаб окна обозревателя.
разрешение монитора1024px1280px1600px2048px4096px
масштаб окна 105%4,939698494,933945584,930144794,926823904,92090485
масштаб окна 100%5,145728645,140562255,136436605,132832085,12640801
масштаб окна 95%5,428627525,422877775,418286725,414275925,40712854
масштаб окна 90%5,747074735,740631025,735486445,730992495,72298507
масштаб окна 85%6,106195906,098922236,093115766,088044156,07900869
масштаб окна 80%6,506075956,497819066,491228626,485472946,47522029
масштаб окна 75%6,870794116,861586196,854237616,847820506,83639120
масштаб окна 70%7,387920307,377275257,368781267,361365057,34815887
масштаб окна 65%7,991890327,979435097,969498837,960824877,94538254
масштаб окна 60%8,698264188,683511958,671746138,661477178,64320010
масштаб окна 55%9,538021789,520286499,506145679,493806879,47185279
масштаб окна 50%10,3434343410,3225806510,3059581310,2914572910,26566416
масштаб окна 45%11,5590230711,5329859611,5122405711,4941494811,46198498
масштаб окна 40%13,1004831513,0670486513,0404236813,0172156712,97597761
масштаб окна 35%15,1148592015,0703696515,0349661415,0041242314,94936298
масштаб окна 30%17,8612045317,7991120417,7497480217,7067785617,63056263
В таблице значений функции прослеживаются три закономерности.
Первая - это относительное постоянство значений функции, округление до целого даёт абсолютное равнство значений, при постоянном значении масштаба окна обозревателя в широком диапазоне разрешений (значения любой строки таблицы).
Вторая - это относительное равенство, округление до целого даёт абсолютное равнство значений, множества значений функции в широком диапазоне размеров окна обозревателя, при любых разрешениях экрана монитора (множество значений столбцов таблицы).
Третья - это практически линейный характер значений логарифмической функции, прямопропорционально соответствующему линейному значению масштаба окна обозревателя в ограниченном диапазоне (100%-50%). Значение функции при любых разрешениях, при значении масштаба окна равному 50% в 2 раза больше чем значения при масштабе 100%. Округлённые до целого значения практически абсолютно равны по величине.
4 . 2 . График функции document.body.offsetWidth/(200-screen.width/document.body.offsetWidth)
all systems
Графики логарифмических значений функции на различных разрешениях практически совпадают по значениям.
5 . События onload, onresize
all systems
В строке событий - onload=onresize=esq, событиям: onload (возникает по завершению загрузки страницы) и onresize (возникает при изменении размеров окна обозреватяля) присваивется значение функции esq.
Работает во всех обозревателях кроме:
версий обозревателя Opera до смены движка на WebKit, событие onresize полноценно не работает,
в обозревателе Chromium от Google inc. отмечено замедление реакции обозревателя на событите - onresize.
6 . Скриншоты отображения страниц на разных мониторах
all systems
Скриншоты 1 и 2. Отсутствие чувствительности к масштабу окна обозревателя, позволяет размещать на широкоформатном мониторе две динамично эластиных страницы открытых в разных окнах (скриншот 1). Угловые размеры страниц при этом будут соизмеримы с параметрами одной страницы (скриншот 2) отображаемой на мониторе с классическим соотношением сторон.
6 . 1 . Скриншот 1
6 . 2 . Скриншот 2
Связанные материалы
1. Общий фон страницы сайта
2. Шапка, верхняя часть сайта
3. Формы поиска по сайту
4. Форма входа на сайт
5. Форма обратной связи
6. Flash проигрыватель формата FLV
7. Flash проигрыватель формата MP3
8. Представление PDF формата
9. Динамично эластичный тип макета
olympic
Динамично эластичный тип макета ─ dynamically expandable elastic / double adaptive dynamically expandable elastic.
It is made priority in Russia DEE ― DAD-EE ™, Profile SV_team_ESQ
Esq team Copyright © 27.04.2009 ─ Яндекс.Метрика