Що таке rem

Параметри пошуку

Вибір рубрики

Сортувати

Порядок відображення

Що таке Рем?

Використання одиниці REM під час завдання величини шрифту в HTML документах.

У CSS3 введено кілька нових одиниць, включаючиrem,яка означаєrootem. Давайте розберемося, що такеremі як він працює. У попередній статтіPX EM PTта інші … вказувалося, що відносна одиниця виразу величини шрифтуemзручна для HTML документів, але не позбавлена недоліків. Для усунення цих недоліків була запропонована одиницяrem, яка визначає розмір шрифту кореневого елемента HTML документа. Що дає? Тепер можна визначити необхідний нам розмір шрифту тега html, нехай це буде 1 rem, а потім визначати розміри шрифтів всіх наступних елементів у відсотках від rem, а не від батьківського елемента, як це відбувається при використанніem.

html < font-size: 62.5%; >/* розмір шрифту кореневого елемента = 10px */ body < font-size: 1.4 rem; >/* розмір шрифту для елемента body =14px */ h1 < font-size: 2.4 rem; >/* для h1 font-size =24px */

Оскільки за замовчуванням у браузерах розмір шрифту дорівнює 16px, у прикладіremдля зручності визначено як 62,5% від базового, що становить 10px

Підтримка браузерами розмірності REM

Постає споконвічне питання – а як цей 8<підтримується браузерами? Ви дуже здивуєтеся, але підтримка браузерами досить пристойна: в Safari 5, Chrome, Firefox 3.6+ і навіть в Internet Explorer 9 підтримка rem реалізована. Opera підтримує з 11.6. До моменту появи статті браузери мобільних пристроїв не дуже добре підтримували цю одиницю, тому хторозробляє для мобільних пристроїв, будьте уважні, перевіряйте підтримку.

Що ж робити у разі браузерів, що не підтримують rem? Можна використовувати резервний варіант за допомогою px. Для цього ми повинні спочатку вказати величину font-size в пікселях px, а потім повторити атрибут, використовуючиrem, як у прикладі нижче.

Ось і все, тепер у нас є послідовний і передбачуваний розмір шрифтів у всіх браузерах, і текст, що масштабується, у всіх поточних версіях основних браузерів.