مبدل واحدهای CSS

تبدیل واحدهای CSS چیست؟

مبدل واحدهای CSS ابزاری است که مقادیر طول را بین سیستم‌های مختلف اندازه‌گیری CSS تبدیل می‌کند. CSS بیش از یک دوجین واحد طول تعریف می‌کند که به دو گروه تقسیم می‌شوند: واحدهای مطلق مانند px، pt، cm و in که به اندازه‌های فیزیکی ثابت نگاشت می‌شوند، و واحدهای نسبی مانند rem، em، vw، vh و % که به زمینه بستگی دارند، مانند اندازه فونت یا ابعاد ویوپورت.

مرورگرها همه طول‌های CSS را هنگام رندرینگ به پیکسل تبدیل می‌کنند. وقتی می‌نویسید 1.5rem، مرورگر عدد 1.5 را در اندازه فونت ریشه (معمولاً 16px) ضرب می‌کند تا 24px به دست آید. وقتی می‌نویسید 50vw، نیمی از عرض جاری ویوپورت را می‌گیرد. درک این روابط برای ساختن طرح‌بندی‌هایی که در دستگاه‌های مختلف مقیاس‌پذیر باشند و به تنظیمات کاربر مانند اندازه فونت سفارشی احترام بگذارند، ضروری است.

مشخصات CSS Values and Units Module Level 4 (W3C) نسبت‌های تبدیل دقیق بین تمام واحدهای مطلق را تعریف می‌کند: 1in = 96px = 72pt = 2.54cm = 25.4mm. واحدهای نسبی نسبت ثابتی ندارند زیرا به زمینه اجرا وابسته‌اند. یک مبدل رایگان واحد CSS به شما امکان می‌دهد این روابط را با توجه به اندازه فونت ریشه و ابعاد ویوپورت خاص خود، بدون نوشتن هیچ کدی، فوری محاسبه کنید.

چرا از مبدل واحدهای CSS استفاده کنیم؟

تبدیل دستی واحدهای CSS به معنای به خاطر سپردن نسبت‌ها، استفاده از ماشین‌حساب و بررسی مجدد محاسبات است. این ابزار تبدیل را به سادگی در مرورگر شما انجام می‌دهد.

موارد استفاده از مبدل واحدهای CSS

مرجع واحدهای طول CSS

CSS ده واحد طول پرکاربرد تعریف می‌کند. واحدهای مطلق تبدیل ثابتی به پیکسل دارند. واحدهای نسبی به زمینه بستگی دارند: اندازه فونت ریشه برای rem، اندازه فونت والد برای em، و ویوپورت مرورگر برای vw و vh.

واحدهای مطلق در برابر نسبی CSS

انتخاب بین واحدهای مطلق و نسبی بر نحوه واکنش طرح‌بندی شما به صفحه‌های مختلف و تنظیمات کاربر تأثیر می‌گذارد. هر گروه مزایا و معایب متمایزی دارد.

جدول تبدیل px به rem

این جدول اندازه فونت ریشه 16px (پیش‌فرض مرورگر) را فرض می‌کند. اگر پروژه شما از پایه متفاوتی استفاده می‌کند، مقدار پیکسل را بر پایه خود تقسیم کنید تا معادل rem به دست آید.

نمونه کد

این مثال‌ها نشان می‌دهند چگونه واحدهای CSS را به‌صورت برنامه‌نویسی در JavaScript، Python، CSS custom properties و Sass تبدیل کنید.

// px to rem (given root font-size of 16px)
const pxToRem = (px, base = 16) => px / base
pxToRem(24)  // → 1.5

// rem to px
const remToPx = (rem, base = 16) => rem * base
remToPx(1.5) // → 24

// px to vw (given viewport width of 1440px)
const pxToVw = (px, viewport = 1440) => (px / viewport) * 100
pxToVw(360)  // → 25

// Dynamic calculation using getComputedStyle
const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
) // → 16 on most browsers

# CSS unit converter functions

def px_to_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_to_px(rem: float, base: float = 16) -> float:
    return rem * base

def px_to_vw(px: float, viewport: float = 1440) -> float:
    return (px / viewport) * 100

def px_to_pt(px: float) -> float:
    return px * 72 / 96

print(px_to_rem(24))     # → 1.5
print(rem_to_px(2.5))    # → 40.0
print(px_to_vw(720))     # → 50.0
print(px_to_pt(16))      # → 12.0

/* Define a base scale using rem */
:root {
  --base: 16px;       /* root font-size */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-8: 2rem;    /* 32px */
}

/* Fluid typography: scales between 1rem (16px) and 2.5rem (40px) */
h1 {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Viewport-relative hero height */
.hero {
  height: calc(100vh - 4rem); /* full viewport minus 64px header */
}

/* Percentage-based grid */
.sidebar { width: 25%; }     /* 360px on 1440px screen */
.content { width: 75%; }     /* 1080px on 1440px screen */

// Reusable px-to-rem function in Sass
@use "sass:math";

$base-font-size: 16px !default;

@function rem($px) {
  @return math.div($px, $base-font-size) * 1rem;
}

// Usage
.card {
  padding: rem(24px);       // → 1.5rem
  margin-bottom: rem(32px); // → 2rem
  border-radius: rem(8px);  // → 0.5rem
  font-size: rem(14px);     // → 0.875rem
}

سؤالات متداول