CSS конвертор на единици

CSS конвертор на единици - калкулатор px, rem, em, %

🎨 Преобразувайте между CSS единици: пиксели (px), rem, em, проценти (%), точки (pt) и viewport единици (vw, vh). Основен инструмент за responsive уеб дизайн и разработка.

Видове CSS единици

• Абсолютни единици: px, pt, cm, mm, in – фиксиран размер независимо от контекста
• Относителни единици: rem, em, %, vw, vh – мащабират се според родителя или viewport
• Спрямо шрифта: rem, em, ch, ex – базирани на размера на шрифта
• Спрямо viewport: vw, vh, vmin, vmax – базирани на размерите на viewport

Обяснение на единиците

• px (пиксели): 1px = 1 пиксел на устройството. Абсолютна единица – прецизна, но не мащабируема.
• rem: Относително към root елемента (html). 1rem = 16px по подразбиране.
• em: Относително към размера на шрифта на родителя. Може да се натрупва при вложени елементи.
• %: Относително към свойството на родителския елемент. 100% = същото като родителя.
• pt (точки): Единица за печат. 1pt = 1/72 инча ≈ 1.333px.
• vw: 1vw = 1% от ширината на viewport. 100vw = пълна ширина.
• vh: 1vh = 1% от височината на viewport. 100vh = пълна височина.

Чести преобразувания

• 1rem = 16px (по подразбиране в браузъра)
• 1em = 16px (ако родителят е 16px)
• 100% = размерът на родителския елемент
• 12pt = 16px (често при печат)
• 1vw = 19.2px (при viewport 1920px)

Метод 62.5%

Задайте html { font-size: 62.5%; } за да направите 1rem = 10px. Това улеснява сметките: 1.6rem = 16px, 2.4rem = 24px и т.н.

Съображения за достъпност

• Използвайте rem за шрифтове: зачита предпочитанията за размер на шрифта в браузъра
• Избягвайте px за шрифтове: не се мащабира според настройките на потребителя
• Използвайте относителни единици: прави дизайна достъпен при zoom/увеличение
• Тествайте с различни размери: проверете при 200% zoom и „large text“

Responsive дизайн

Използвайте rem за media queries: @media (min-width: 48rem) вместо 768px. Така breakpoints се мащабират според предпочитанията за размер на шрифта на потребителя.

💡 Професионален съвет: Съвременната добра практика е да използвате rem за повечето размери (шрифтове, отстояния, breakpoints), px за граници и фини детайли, а % или viewport единици за layouts. Избягвайте em за отстояния, защото може да се натрупва неочаквано.