|
Більшість вітчизняних дизайнерів люблять використовувати px, тоді як більшість іноземних сайтів — em і rem, тож у чому різниця між цими трьома і які переваги та недоліки кожного з них? Давайте детально представимо. Функції PX: 1. IE не може регулювати розмір шрифту тих, що використовують px як одиницю; 2. Причина, чому більшість іноземних сайтів можна налаштовувати, полягає в тому, що вони використовують em або rem як одиниці шрифтів; 3. Firefox може регулювати px, em та rem, але понад 96% китайських користувачів користуються браузером (або ядром) IE. пікселі пікселів. Відносні одиниці довжини. Піксель пікселя відображається відносно роздільної здатності екрана монітора. (Цитата з посібника CSS2.0) EM — це відносна одиниця довжини. Розмір шрифту відносно тексту в поточному об'єкті. Якщо розмір шрифту тексту в рядку не встановлений штучно, він буде відносно стандартного розміру шрифту браузера. (Цитата з посібника CSS2.0) Стандартна висота шрифту для будь-якого браузера — 16px. Усі невідкориговані браузери відповідають: 1em=16px. Тоді 12px=0,75em, 10px=0,625em. Щоб спростити конвертацію розміру шрифту, потрібно вказати font-size=62.5% у селекторі тіла в CSS, що робить значення em 16px*62.5%=10px, тобто 12px=1.2em, 10px=1em, тобто потрібно розділити початкове значення px на 10, а потім замінити його на em як одиницею. Особливості EM: 1. Значення em не є фіксованим; 2. EM успадковує розмір шрифту батьківського елемента. Тож коли ми пишемо CSS, потрібно звертати увагу на дві речі: 1. Оголосити розмір шрифту=62,5% у селекторі тіла; 2. Розділіть початкове значення px на 10 і замініть його на em як одиницю; 3. Перерахуйте значення em для збільшених шрифтів. Уникайте повторних оголошень розміру шрифту. Тобто уникнути явища 1,2 * 1,2 = 1,44. Наприклад, якщо оголосити розмір шрифту 1.2em у #content, то при оголошенні розміру шрифту p він може бути лише 1em, а не 1.2em, бо цей em не є тим em, і стає 1em=12px, оскільки успадковує висоту шрифту #content. Функції REM rem — це нова відносна одиниця (root em), додана до CSS3, яка привернула багато уваги. У чому різниця між цим пристроєм і ним? Різниця в тому, що коли ви використовуєте rem для встановлення розміру шрифту елемента, це все одно відносний розмір, але відносний — лише кореневий елемент HTML. Цей пристрій можна вважати таким, що поєднує переваги відносного розміру та абсолютного розміру, завдяки чому він може не лише змінювати кореневий елемент для пропорційного регулювання всіх розмірів шрифтів, а й уникати ланцюгової реакції складання розмірів шрифтів шар за шаром. Наразі REM-режим підтримується у всіх браузерах, крім IE8 і попередніх версій. Для браузерів, які цього не підтримують, відповідь також дуже проста — написати абсолютну одиницю оператора. Ці браузери ігнорують розмір шрифту, встановлений у REM. Ось приклад: p {font-size:14px; розмір шрифту: .875rem; } Примітка:Вибір блоків шрифтів здебільшого залежить від вашого проєкту, і якщо ваша база користувачів використовує останню версію браузера, рекомендується REM, якщо є питання сумісності — використовуйте px, або обидва варіанти. Ось адреса інструменту конвертації одиниць px, em, rem:http://pxtoem.com/
| 
Опубліковано 21.03.2017 09:31:50
|
|
|
