- Універсальні розміри шрифтів повинні відповідати розмірам екрану
- Розміри залежать від співвідношення сторін екрану
- підтримка браузерів
Розміри розробляється дизайну сайту, які залежать від ширини або висоти екрану, зазвичай задаються в процентному співвідношенні. Можливо, ви робили так з усіма своїми сайтами, оптимізуючи їх розміри під планшети і смартфони. І не має значення, що за елементи знаходяться на сторінці (текстові блоки, зображення) - все ті елементи, які повинні підлаштовуватися під розміри екрану.
Але використання процентних значень не завжди кращий спосіб визначити розміри по відношенню до вікна браузера. Прикладом може служити розмір шрифту. Розмір шрифту не може бути зроблений так, щоб реагувати на зміну ширини вікна браузера, по крайней мере, не в процентах. Тому в CSS3 з'явилися нові одиниці вимірювання, які допомагають вирішити цю проблему.
Одиниці виміру "vw" (view width) і "vh" (view height) визначають ширину і висоти щодо розміру вікна браузера.
div {width: 50vw; height: 100vh; }У цьому прикладі елемент займає 50% ширини і 100% висоти вікна браузера. У той час як значення цих чисел у відсотках залежать від ширини батьківського елементу. У нових одиницях можливо визначити навіть висоту по відношенню до ширини і навпаки.
div {height: 50vw; }У цьому прикладі висота елемента div буде дорівнює 50% ширини вікна браузера. Масштабування ширини вікна змінює висоту елемента.
Універсальні розміри шрифтів повинні відповідати розмірам екрану
якщо при верстці сайтів ви хочете забезпечити правильне відображення шрифтів і хочете бути впевненими в тому, що шрифти будуть відображатися в прийнятних розмірах незалежно від пристрою, на якому вони відображаються. Особливо це стосується заголовків, до яких має бути приділено більше уваги, щоб уникнути проблем з їх відображенням.
h1 {font-size: 10vw; }У цьому прикладі розмір шрифту становить 10% від ширини екрана браузера. Завдяки "vw", розмір шрифту, призначений для h1 буде завжди підлаштовуватися під розміри вікна браузера.
Розміри залежать від співвідношення сторін екрану
Поряд з властивостями "vw" і "vh", існують властивості "vmin" і "vmax". vmin визначає розмір по відношенню до ширини або висоті вікна, в залежності від того, яке значення є меншим. Якщо ширина менше висоти, то "vmin" буде залежати від ширини. "Vmax" працює навпаки - він залежить від більшої ширини або висоти екрану.
div {width: 2vmin; }У цьому прикладі, елемент div отримує 20% ширини екрану поки ширина екрану менше, ніж висота.
підтримка браузерів
Нові одиниці виміру підтримуються всіма популярними браузерами: Interner Explorer, починаючи з 10-ї версії; в Firefox додана підтримка з 19й версії, а в Chrome - з 20 версії. Так що можете сміливо впроваджувати нові можливості при створенні своїх сайтів .