Головна

контекстне відновлення

  1.  Distributed Password Recovery - високошвидкісне відновлення паролів
  2.  II. відновлення ідеї
  3.  Вання токсичних іонів смолою. Регенерація (відновлення сорбуючою
  4.  Відновлення RAID-Z
  5.  відновлення балансу
  6.  Відновлення в батьківських правах (ст. 72 СК РФ).
  7.  Відновлення вродітельскіх правах.

Зараз буде трохи математики: беремо цільове значення кегля і ділимо на кегль (font size) його контейнера, тобто контексту. В результаті ми отримуємо бажаний кегль, виражений у відносних і досить гнучких одиницях em.

Іншими словами, відносний кегль можна розрахувати за такою формулою:

target ? context = result

(Відволічемося на хвилинку. Особисто у мене слово «математика» викликає негайний і серйозний напад паніки. У вас теж? Стійте, не тікайте з криками - все не так страшно. Це говорить вам людина, яка замінила курс математики в коледжі курсом філософії. Робіть , як я: просто порахуйте все на калькуляторі і скопіюйте результат в CSS. Калькулятори - просто порятунок для таких, як ми, правда?)

Отже, формула у нас є, давайте повернемося до нашого заголовку в 24px. Якщо припустити, що базовий кегль (font size) елемента body дорівнює 16 пікселям при 100%, ми можемо підставити ці значення безпосередньо в формулу. В результаті отримаємо відношення цільового кегля заголовка h1

(24 пікселя, 24px) і кегля його контексту (16 пікселів, 16px):

24: 16 = 1,5

Так як 24 пікселя в 1,5 рази більше 16 пікселів, це означає, що кегль дорівнює 1,5 em.

h1 {

font-size: 1.5em; / * 24px / 16px * /

font-style: italic;

font-weight: normal;

}

Вуаля! Розмір нашого заголовка прекрасно збігається з розміром, зазначеним у оригінал-макеті, але при цьому виражений у відносних, масштабованих одиницях (Мал. 2.7).

(Зазвичай я залишаю коментар з розрахунками з правого боку (/ * 24px / 16px * /). Вносити зміни стає набагато простіше.)

З цим закінчили, давайте повернемося до нашої самотньої маленької посиланням Read More (дізнатися більше). Хоча, якщо подивитися на Мал. 2.7, Вона не така вже й маленька. І це проблема. Нам потрібно зменшити задані 11 пікселів, і досить суттєво, оскільки розмір його шрифту прийняв значення 1,5 em від його контексту, h1.

Мал. 2.7. Розмір нашого заголовка правильно виражений в гнучких, масштабованих одиницях em. (Але що за дурниця діється з посиланням?)

І ось тут потрібна увага. Оскільки текст заголовка встановлений рівним 1,5 em, будь-які елементи всередині цього заголовка повинні бути виражені у вигляді частки цього значення. Іншими словами, змінився наш контекст.

Тому, щоб встановити кегль посилання в одиницях em, ми ділимо цільові 11 пікселів (11px) не так на 16 (значення, встановлене в body), а на 24 - кегль заголовка, наш новий контекст:

11: 24 = +0,458333333333333

Ми отримали якийсь зовсім негарне число. Може бути, саме негарне, які ви сьогодні бачили. (Але почекайте, ця глава ще не закінчена.)

Вам захочеться округлити його до більш-менш прийнятного числа - скажімо, 0,46 em. Навіть не думайте! Може, ваші очі і втомляться дивитися на +0,458333333333333, але саме це число ідеально являє бажаний кегль в пропорційному відношенні. До того ж браузери майстерно володіють мистецтвом округлення зайвих десяткових знаків, коли перетворюють значення в пікселі. Тому потрібно дати їм більше, а не менше, і в кінці вас чекатиме відмінний результат.

Тепер просто скопіюйте це невибагливе число в CSS:

h1 a {

font: bold 0.458333333333333em Calibri, Optima, Arial, sans-serif; / * 11px / 24px * /

color: # 747474;

letter-spacing: 0.15em;

text-transform: uppercase;

text-decoration: none;

}

Подивимося на результат. Наша сторінка закінчена, вона повністю відповідає бажаному дизайну, а текст заданий в масштабованих одиницях em (Мал. 2.8).

Мал. 2.8. За допомогою простої математики ми створили більше красивий дизайн - і без всяких пікселів

 



 гнучкі шрифти |  Створення гнучкої сітки

 анотація |  Від наукового редактора |  Наша чуйна мережу |  А тепер пристебніть ремені |  чуйна архітектура |  шлях вперед |  Медіазапроси (media queries), модуль специфікації CSS3. |  гнучка сітка |  Від пікселів до відсотків |  Гнучкі поля і відступи |

© um.co.ua - учбові матеріали та реферати