toolsmoah

Конвертер CSS px ↔ rem

Конвертируйте между единицами CSS px и rem.

Конвертер единиц CSS
Конвертировать пиксели (px) в единицы rem.
Объяснение единиц CSS

px (Пиксели)

Абсолютная единица, представляющая один пиксель на экране. Имеет фиксированный размер и ограничена для адаптивного дизайна.

rem (Root EM)

Относительная единица, основанная на размере шрифта корневого элемента (html). Полезна для доступности и адаптивного дизайна.

Формула конвертации

px → rem: px ÷ базовый размер шрифта
rem → px: rem × базовый размер шрифта

Рекомендации по использованию

  • • Размер шрифта: рекомендуется rem
  • • Отступы (margin, padding): рекомендуется rem
  • • Граница: можно использовать px
  • • Медиа-запросы: рекомендуется rem
Общие значения конвертации
px
rem
8px
0.5rem
12px
0.75rem
14px
0.875rem
16px
1rem
18px
1.125rem
20px
1.25rem
24px
1.5rem
32px
2rem

Полное руководство по единицам CSS

Выбор правильных единиц CSS в веб-разработке значительно влияет на удобство использования и доступность. Изучите различия между px и rem и способы их использования в соответствующих ситуациях.

Подробное руководство по единицам Pixel (px)

📐 Особенности

  • • Абсолютная единица с соответствием 1:1 пикселям экрана
  • • Постоянный размер во всех браузерах
  • • Возможен точный контроль макета
  • • Не зависит от пользовательских настроек

✅ Рекомендуемые варианты использования

  • • Толщина границы (1px, 2px)
  • • Смещение тени
  • • Размеры иконок (16px, 24px)
  • • Точная настройка отступов

⚠️ Предостережения

  • • Игнорирует пользовательские настройки размера шрифта
  • • Может вызывать проблемы с доступностью
  • • Ограничен для адаптивного дизайна
Подробное руководство по единицам rem

📐 Особенности

  • • Основан на размере шрифта корневого элемента (html)
  • • Отражает пользовательские настройки
  • • Сохраняет постоянные пропорции
  • • Удобен для доступности

✅ Рекомендуемые варианты использования

  • • Настройки размера шрифта
  • • Отступы (margin, padding)
  • • Размеры контейнеров
  • • Точки останова медиа-запросов

💡 Преимущества

  • • Сохраняет пропорции при масштабировании
  • • Улучшает доступность
  • • Простота обслуживания
Руководство по практическому применению

🎯 Стратегия использования единиц

Типографика

Используйте rem для размеров шрифта и межстрочного интервала rem

Макет

Используйте rem для отступов и контейнеров rem

Детали

Используйте px для границ и теней px

📱 Советы по адаптивному дизайну

Подход Mobile-first

Установите базовый размер шрифта 16px и масштабируйте с помощью единиц rem

html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }
Использование медиа-запросов

Поддерживайте согласованность с точками останова на основе rem

@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}

♿ Соображения доступности

✅ Рекомендуемые практики
  • • Устанавливайте размеры шрифта с помощью единиц rem
  • • Поддерживайте минимальный размер шрифта 16px
  • • Достаточный межстрочный интервал (1,5 или более)
  • • Минимальная область касания 44px
❌ Чего следует избегать
  • • Использование фиксированных значений px для размеров шрифта
  • • Маленький текст менее 12px
  • • Фиксированная ширина контейнеров
  • • Межстрочный интервал 1,0 или менее

🔧 Поддержка браузеров и совместимость

Единица px

Идеальная поддержка во всех браузерах. Доступно с IE6+.

Единица rem

Идеальная поддержка в IE9+ и современных браузерах. Требуется запасной вариант для IE8 и ниже.

Для поддержки IE8: Сначала объявите значение px, затем добавьте значение rem в качестве запасного варианта

font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */
    Конвертер CSS px ↔ rem | Текстовая лаборатория