Розміри для адаптивної верстки
Для створення адаптивних макетів використовуються відносні одиниці вимірювань замість стандартного статичного px. Найпоширеніші:
- em;
- rem;
- %.
В адаптивній верстці html em використовується для того, щоб задавати розміри шрифтів і відступів. За промовчанням 1 em дорівнює 16 пикселів. Відповідно, щоб задати шрифт для параграфа p розміром 32 пікселя, необхідно вказати наступні:
p {
font-size: 2em;
}
Особливістю використання одиниці є те, що 1em дорівнює розміру шрифту свого елемента. Тобто 1em приймає різні значення в різних ділянках коду. Наприклад, в блоці, де розмір шрифту дорівнює 2em (32px), margin у 1em буде дорівнювати 32 пикселів. Але там, де шрифт дорівнює 1em (16px), padding в 1em буде дорівнювати стандартним 16 пикселів.
Rem – кореневий em, який визначається в тегу <html>. 1 root-em, на відміну від 1em, дорівнює числу при будь-яких обставин. Значення змінюється лише тоді, коли зміни задаються примусово.
Відсотки, як правило, використовуються для встановлення ширини блоків або зображень. Незалежно від розмірів екрану він буде відповідати вказаним значенням, наприклад, 80 %.
