Таблица значений rem для 16px
Измените базовое значение размера шрифта чтобы в таблице отобразились значения для нужного базового размера
| px | rem |
|---|---|
| 8 | |
| 9 | |
| 10 | |
| 11 | |
| 12 | |
| 13 | |
| 14 | |
| 15 | |
| 16 | |
| 17 |
| px | rem |
|---|---|
| 18 | |
| 19 | |
| 20 | |
| 21 | |
| 22 | |
| 23 | |
| 24 | |
| 25 | |
| 26 | |
| 27 |
| px | rem |
|---|---|
| 28 | |
| 29 | |
| 30 | |
| 31 | |
| 32 | |
| 33 | |
| 34 | |
| 35 | |
| 36 | |
| 37 |
| px | rem |
|---|---|
| 38 | |
| 39 | |
| 40 | |
| 41 | |
| 42 | |
| 43 | |
| 44 | |
| 45 | |
| 46 | |
| 47 |
px (пиксель) - это единица измерения размеров для экранов (мониторов). Используется для максимально конкретного и точного задания размеров.
rem – задаёт размер относительно размера шрифта заданного для тега <html>, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в rem.
Чтобы размер шрифта масштабировался для устройств с разным расширением экрана, в css через медиа-запросы задают базовый размер шрифта для тега <html> для разных размеров экранов. Пример:
html { font-size: 16px; } @media (max-width: 576px) { html { font-size: 13px; } } @media (max-width: 768px) { html { font-size: 14px; } } @media (max-width: 992px) { html { font-size: 15px; } }
***Данные размеры для свойства font-size не являются рекомендуемыми. Они просто взяты как пример. Размер напрямую зависит от используемого шрифта и его особенностей. При этом сами значения для font-size не обезательно должны быть целыми числами, а могут быть десятичными дробями: font-size: 15.7575px, что очень часто практекуется в различный css-фреймворках.
Формула для перевода из px в rem
Для перевода значений из пикселей в rem применяется следующая формула:
- rem - значение в rem
- px - значение в пикселях
- База - базовый размер шрифта
Похожие калькуляторы:
Войдите чтобы писать комментарии
Комментарии 2
Кто вообще придумал такие заморочки? Чем больше изучаю это, тем меньше понимаю.
px, rem, em, проценты - напридумывали кучу всего. Оставили бы одни пиксели и не морочили б голову.
Народ, помогите!
Какие размеры для html поставить для шрифта Roboto подключенного из гугл шрифтов?