Публікація статті «Розумні динамічні колонки із застосуванням CSS і jQuery» стала приводом для написання сьогоднішнього поста. Суть дуже схожа і мова тут піде про розмір шрифту.
Завдання - реалізувати динамічну зміну розміру шрифту сайту в залежності від дозволу екрану, тобто розміру вікна браузера.
Перш ніж приступити до опису рішення, хочу позначити два моменти:
Спочатку я детально опишу роботу jQuery-скрипта, а потім поясню, як його застосувати до тієї чи іншої частини веб-сайту.
За точку відліку я взяв ширину в 1000 пікселів. Як правило, це мінімальна ширина, під яку набираються сайти. Заносимо цей показник в змінну:
Тепер встановлюємо мінімальний розмір шрифту в пікселях, нижче якого він не буде зменшуватися:
Далі зчитуємо ширину хтмл-документа, яку також заносимо в змінну:
Визначаємо коефіцієнт, на який буде множитися базовий (мінімальний) розмір шрифту в залежності від розміру вікна браузера. Цифру отримуємо шляхом ділення ширини хтмл-документа на базову (мінімальну) ширину. Тобто наприклад, якщо ширина вікна браузера складає 1600 пікселів, то отримаємо коефіцієнт 1,6.
Виконуємо умова: якщо ширина хтмл-документа більше базової ширини, тоді розмір шрифту множимо на коефіцієнт, округляючи отриманий результат до цілого числа:
Тепер отриманий скоригований розмір шрифту застосовуємо до тегу
:Всі вищеописані рядки поміщаємо в функцію function fontSize () <>. потім запускаємо цю функцію після завантаження хтмл-документа, а також після зміни розміру вікна браузера:
Ось цілком код jQuery-скрипта, який вийшов у нас в підсумку:
Розглянемо застосування вищевказаного скрипта на прикладі 3-колоночного макета сторінки, що має наступну структуру HTML-коду:
Тепер залишилося тільки використовувати динамічний розмір шрифту для тих блоків, до яких ми хочемо його застосувати. Давайте, для прикладу, зробимо так, щоб він змінювався у всій сторінки, за виключення правої колонки, а у лівій колонки зробимо його трохи менше основного.
Все дуже просто.
По перше. правій колонці ми просто-напросто встановлюємо свій фіксований розмір шрифту і висоту рядка, і скрипт його не зачепить:
По-друге. лівій колонці ставимо трохи менший розмір шрифту:
По-третє. потрібно або у тега
. або у відповідного блоку вказати висоту рядка в em, щоб вона теж змінювалася динамічно.Ось, в принципі, і все.
Якщо ви хочете міняти розмір шрифту тільки у конкретного блоку, припустимо, у #content. тоді буде логічніше в скрипті поміняти body (в рядку $ (# 'body #'). css ();) на потрібний ідентифікатор або клас.
Адже не дарма і у тебе і у багатьох інших, є можливість вибору розміру шрифту не тільки засобами браузера.
До того ж, якщо розмір вказаний в px, то в IE не працює.
Думаю, простому користувачеві, буде набагато зручніше, якщо автомат є, ні до чого змушувати його робити зайві рухи тіла.
Все, природно вимагає перевірки і тестування в реальних умовах.
Та й скрипт потрібен з більш плавними регулюваннями і додатковими настройками, але не дуже складний в розумінні.
Адже не дарма і у тебе і у багатьох інших, є можливість вибору розміру шрифту не тільки засобами браузера.
Так, недарма. Але тут надається ВИБІР. А ти хочеш автоматизувати, позбавляючи користувача права вибору.
Думаю, простому користувачеві, буде набагато зручніше, якщо автомат є
А у мене протилежна думка =)))
Та й скрипт потрібен з більш плавними регулюваннями і додатковими настройками
Ось з цим згоден. У такому вигляді, як зараз, складно говорити про практичність скрипта.
Діма, то, що подобається тобі чи мені, нікому не важливо :)
Головне, щоб було зручно користувачеві, без зайвих дій з його боку, ось за це він скаже, тільки спасибі.
Ледачі ми все, нам автомат подавай :)
До того ж не у всіх 100% зір.
Але тут надається ВИБІР.
Тут, то ж можна посперечатися :)
За життя, часто вибору немає, ніхто від цього не помер, якщо все буде зроблено грамотно і розумно, вибір по суті буде не потрібен. Ти ж не даєш користувачеві можливості змінити накреслення і гарнітуру шрифту, може йому більше «verdana» подобається і «italic» з «bold» на додачу :)
Часто тільки здається, що ми комусь даємо право вибору, насправді це не зовсім так :)
У такому вигляді, як зараз ...
Думаємо, робимо, вирішуємо :)
Загалом, поки не буде рішення цікавіше цього, сперечатися далі не бачу сенсу =) Бажаю удачі в пошуках.
До речі офігенна тема, якщо більшість розмірів вказувати в відносних одиницях (em) не тільки розмір шрифту але і ширину колонок і відступи, то виходить псевдо гумовий макет. Начебто розмірами все зафіксовано, але якщо змінювати базовий шрифт за рахунок ресайз то і ширина колонок буде змінюватись.
P.S. для тих хто не втеме - у боді виставляється font-size в 62.5% для простоти розрахунків, так як 62.5% = 10px, то стає легчк розраховувати розміри наприклад 200px = 20em 12px = 1.2em. Тільки важливо пам'ятати що em щодо рдітельского блоку, тобто якщо ви поміняли блоку розмір шрифту то треба вже рахувати від нового базового розміру, але для цих цілей є корисна штука - em калькулятор
Приклад не дуже вдалий. Динамічна зміна шрифту має сенс при гумової верстки, щоб розмір тексту збільшувався пропорційно розмірам блоків.
Закрутився і забув :)
Ось лінк. на гілку форуму, де ця проблема знайшла рішення без бібліотеки jQuery.
Приклади відповідні там є.
Дим, починалося-то все, з твого поста :)
А так звичайно.
Будемо доводити до розуму - відсотки, em - все перепробуем :)
