CSS यूनिट रूपांतरण क्या है?

CSS यूनिट कनवर्टर एक ऐसा टूल है जो विभिन्न CSS मापन प्रणालियों के बीच लंबाई की values को convert करता है। 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। सापेक्ष इकाइयों का कोई निश्चित अनुपात नहीं होता क्योंकि वे runtime context पर निर्भर करती हैं। एक फ्री CSS यूनिट कनवर्टर आपको आपके specific root font-size और viewport dimensions के आधार पर इन calculations को झटपट करने देता है, बिना कोई कोड लिखे।

CSS यूनिट कनवर्टर का उपयोग क्यों करें?

CSS इकाइयों को हाथ से बदलने का मतलब है अनुपात याद रखना, कैलकुलेटर खोलना और गणित दोबारा check करना। यह टूल ब्राउज़र में आसानी से convert कर देता है।

⚡

तत्काल रूपांतरण

कोई मान दर्ज करें, स्रोत इकाई चुनें, और एक साथ सभी 10 CSS इकाइयों में परिणाम देखें। px-से-rem, px-से-vw या px-से-pt के लिए अलग-अलग गणना करने की आवश्यकता नहीं।

🔒

आपका डेटा निजी रखें

सभी रूपांतरण आपके ब्राउज़र में स्थानीय रूप से चलते हैं। कोई भी मान किसी सर्वर को नहीं भेजा जाता, न लॉग किया जाता है, न संग्रहीत किया जाता है। टैब बंद करें और डेटा चला जाता है।

🎯

आपके सटीक संदर्भ से मेल खाएँ

अपना रूट फ़ॉन्ट-आकार, व्यूपोर्ट चौड़ाई, व्यूपोर्ट ऊँचाई और पैरेंट फ़ॉन्ट-आकार सेट करें। कनवर्टर इन मानों का उपयोग rem, em, vw, vh और % इकाइयों के लिए सटीक परिणाम उत्पन्न करने के लिए करता है।

📏

सभी CSS लंबाई इकाइयाँ समाहित

px, rem, em, vw, vh, %, pt, cm, mm और in का समर्थन करता है। चाहे आप स्क्रीन लेआउट, प्रिंट स्टाइलशीट या अनुक्रियाशील टाइपोग्राफी पर काम कर रहे हों, हर इकाई उपलब्ध है।

CSS यूनिट कनवर्टर के उपयोग के मामले

फ्रंटएंड विकास

किसी डिज़ाइन फ़ाइल के पिक्सेल मानों को कॉम्पोनेंट लाइब्रेरी के लिए rem में बदलें। जब Figma मॉकअप में 24px स्पेसिंग निर्दिष्ट हो, तो उसे 1.5rem में बदलें ताकि लेआउट उपयोगकर्ता की फ़ॉन्ट-आकार प्राथमिकता के साथ स्केल हो।

बैकएंड / फुल-स्टैक इंजीनियरिंग

PDF या ईमेल टेम्पलेट उत्पन्न करें जहाँ आयाम pt या cm में निर्दिष्ट हों। Puppeteer या wkhtmltopdf जैसे उपकरणों के साथ सर्वर-साइड रेंडरिंग के लिए अपने CSS पिक्सेल मानों को प्रिंट-तैयार पॉइंट आकारों में बदलें।

DevOps / CI पाइपलाइन

यह सत्यापित करें कि किसी डिज़ाइन सिस्टम के स्पेसिंग टोकन बिल्ड चरणों में सुसंगत इकाइयों का उपयोग करते हैं। शीघ्रता से जाँचें कि 16px आधार उत्पन्न CSS में अपेक्षित rem मान देता है।

QA / दृश्य परीक्षण

cross-browser testing के दौरान computed styles जाँचें। जब Chrome DevTools 14.4px की computed value दिखाए, तो उसे rem में बदलें और confirm करें कि यह stylesheet के expected 0.9rem से match करता है।

डेटा विज़ुअलाइज़ेशन

SVG या canvas तत्वों का आकार व्यूपोर्ट आयामों के सापेक्ष निर्धारित करें। निश्चित पिक्सेल चार्ट चौड़ाइयों को vw इकाइयों में बदलें ताकि विज़ुअलाइज़ेशन विभिन्न मॉनिटरों पर स्क्रीन का एक सुसंगत प्रतिशत भरें।

CSS सीखना

विभिन्न आधार आकारों के साथ प्रयोग करके rem, em और px के बीच के संबंध को समझें। रूट फ़ॉन्ट-आकार को 16px से 18px में बदलें और देखें कि हर rem मान कैसे बदलता है।

CSS लंबाई इकाइयाँ संदर्भ

CSS 10 सामान्यतः उपयोग की जाने वाली लंबाई इकाइयाँ परिभाषित करता है। निरपेक्ष इकाइयों का पिक्सेल में एक निश्चित रूपांतरण होता है। सापेक्ष इकाइयाँ संदर्भ पर निर्भर करती हैं: rem के लिए रूट फ़ॉन्ट-आकार, em के लिए पैरेंट फ़ॉन्ट-आकार, और vw तथा vh के लिए ब्राउज़र व्यूपोर्ट।

इकाई	नाम	डिफ़ॉल्ट आकार	किसके सापेक्ष
px	Pixel	1px	Fixed; 1px = 1/96 of 1in on screens
rem	Root em	16px (default)	Relative to <html> font-size
em	Em	Inherited	Relative to parent element font-size
vw	Viewport width	1% of viewport	Relative to browser window width
vh	Viewport height	1% of viewport	Relative to browser window height
%	Percentage	Varies	Relative to parent property value
pt	Point	1.333px	Print unit; 1pt = 1/72 of 1in
cm	Centimeter	37.795px	Physical unit; 1cm = 96px / 2.54
mm	Millimeter	3.7795px	Physical unit; 1mm = 1cm / 10
in	Inch	96px	Physical unit; 1in = 96px (CSS spec)

निरपेक्ष बनाम सापेक्ष CSS इकाइयाँ

निरपेक्ष और सापेक्ष इकाइयों के बीच चयन यह affect करता है कि आपका layout अलग-अलग screens और user settings पर कैसे behave करता है। हर group के अपने trade-offs हैं।

निरपेक्ष इकाइयाँ (px, pt, cm, mm, in)

निरपेक्ष इकाइयाँ संदर्भ से निरपेक्ष एक समान भौतिक आकार उत्पन्न करती हैं। बॉर्डर, छाया और ऐसे तत्वों के लिए px का उपयोग करें जो स्केल नहीं होने चाहिए। प्रिंट स्टाइलशीट के लिए pt का उपयोग करें। CSS विनिर्देश 1in = 96px परिभाषित करता है, हालाँकि डिस्प्ले DPI के अनुसार वास्तविक भौतिक आकार भिन्न हो सकता है।

सापेक्ष इकाइयाँ (rem, em, vw, vh, %)

सापेक्ष इकाइयाँ अपने संदर्भ के साथ स्केल होती हैं। उपयोगकर्ता की प्राथमिकताओं का सम्मान करने के लिए फ़ॉन्ट-आकार और स्पेसिंग हेतु rem का उपयोग करें। कॉम्पोनेंट-आंतरिक स्केलिंग के लिए em का उपयोग करें (तत्व के स्वयं के फ़ॉन्ट-आकार के सापेक्ष पैडिंग)। हीरो सेक्शन जैसे व्यूपोर्ट-भरने वाले लेआउट के लिए vw/vh का उपयोग करें।

px से rem रूपांतरण की सामान्य तालिका

यह तालिका 16px के रूट फ़ॉन्ट-आकार (ब्राउज़र का डिफ़ॉल्ट) को मानती है। यदि आपका प्रोजेक्ट किसी भिन्न आधार का उपयोग करता है, तो rem समकक्ष प्राप्त करने के लिए पिक्सेल मान को अपने आधार से विभाजित करें।

px	rem	pt	सामान्य उपयोग
10	0.625	7.5	Small caption text
12	0.75	9	Body text (compact)
14	0.875	10.5	Default body text
16	1	12	Root font-size (browser default)
18	1.125	13.5	Large body text
20	1.25	15	H4 heading
24	1.5	18	H3 heading
32	2	24	H2 heading
48	3	36	H1 heading
64	4	48	Display / hero text

कोड उदाहरण

ये उदाहरण दिखाते हैं कि JavaScript, Python, CSS कस्टम प्रॉपर्टी और Sass में CSS इकाइयों को प्रोग्रामेटिक रूप से कैसे बदला जाए।

JavaScript

// 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

Python

# 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

CSS (calc & custom properties)

/* 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 */

SCSS (mixin)

// 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
}

अक्सर पूछे जाने वाले प्रश्न

ब्राउज़रों में डिफ़ॉल्ट रूट फ़ॉन्ट-आकार क्या है?

सभी major browsers (Chrome, Firefox, Safari, Edge) का root font-size by default 16px होता है। मतलब 1rem = 16px, जब तक user या कोई stylesheet html element का font-size न बदले। कुछ users accessibility के लिए browser settings में इसे बढ़ाते हैं — यही वजह है कि text के लिए px से rem बेहतर default है।

px को rem में कैसे बदलें?

पिक्सेल मान को रूट फ़ॉन्ट-आकार से विभाजित करें। डिफ़ॉल्ट 16px आधार के साथ: 24px / 16 = 1.5rem। यदि आपका प्रोजेक्ट html { font-size: 10px } (एक सामान्य रीसेट) सेट करता है, तो 24px / 10 = 2.4rem। सूत्र हमेशा यही है: rem = px / रूट-फ़ॉन्ट-आकार।

rem और em में क्या अंतर है?

rem रूट तत्व के फ़ॉन्ट-आकार (html टैग) के सापेक्ष है, जबकि em वर्तमान तत्व के पैरेंट फ़ॉन्ट-आकार के सापेक्ष है। इसका अर्थ है कि rem पूरे पृष्ठ में सुसंगत आकार उत्पन्न करता है, जबकि em नेस्ट होने पर बढ़ता जाता है। 2em पैरेंट के अंदर 2em रूट आकार का 4 गुना बन जाता है। वैश्विक स्पेसिंग और फ़ॉन्ट आकारों के लिए rem का उपयोग करें; em का उपयोग तब करें जब आप चाहते हों कि आकार कॉम्पोनेंट के स्वयं के पाठ के सापेक्ष स्केल हो।

vw या vh इकाइयों का उपयोग कब करना चाहिए?

उन तत्वों के लिए vw का उपयोग करें जो ब्राउज़र विंडो की चौड़ाई के साथ स्केल होने चाहिए, जैसे पूर्ण-चौड़ाई वाले हीरो सेक्शन या तरल टाइपोग्राफी (vw के साथ clamp)। पूर्ण-स्क्रीन सेक्शन या व्यूपोर्ट-ऊँचाई लेआउट के लिए vh का उपयोग करें। मोबाइल ब्राउज़रों पर vh के साथ सावधान रहें जहाँ एड्रेस बार व्यूपोर्ट ऊँचाई बदलता है; नई dvh (dynamic viewport height) इकाई इसे हल करती है।

क्या मैं एक ही प्रॉपर्टी में विभिन्न CSS इकाइयाँ मिला सकता हूँ?

हाँ। CSS calc() फ़ंक्शन किसी एकल अभिव्यक्ति में किसी भी इकाई को संयोजित करने की अनुमति देता है। उदाहरण के लिए, width: calc(100vw - 2rem) पूर्ण व्यूपोर्ट चौड़ाई से 32px (डिफ़ॉल्ट आधार पर) घटाता है। आप clamp() में भी इकाइयाँ मिला सकते हैं: font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem) तरल टाइपोग्राफी बनाता है जो 16px और 40px के बीच स्केल होती है।

CSS में 1pt कितने पिक्सेल होते हैं?

CSS में, 1pt = 1 इंच का 1/72, और 1 इंच = 96px, इसलिए 1pt = 96/72 = 1.333px। यह अनुपात स्क्रीन DPI से निरपेक्ष CSS विनिर्देश में निश्चित है। पॉइंट मुख्यतः प्रिंट स्टाइलशीट और PDF उत्पादन में उपयोग किए जाते हैं। स्क्रीन डिज़ाइन के लिए, px या rem बेहतर विकल्प हैं।

क्या 62.5% font-size रीसेट अभी भी एक अच्छी प्रथा है?

html { font-size: 62.5% } सेट करने से 1rem = 10px हो जाता है, जो मानसिक गणित को सरल बनाता है (24px = 2.4rem)। हालाँकि, इसके लिए आवश्यक है कि आप body तत्व पर स्पष्ट रूप से font-size सेट करें और यह तृतीय-पक्ष कॉम्पोनेंट के साथ समस्याएँ उत्पन्न कर सकता है जो डिफ़ॉल्ट 16px आधार मानते हैं। आधुनिक प्राथमिकता 16px डिफ़ॉल्ट रखना और रूपांतरण संभालने के लिए Sass फ़ंक्शन या PostCSS प्लगइन का उपयोग करना है।

CSS Unit Converter