CSS यूनिट कन्वर्टर
px, rem, em, vh, vw जैसी CSS इकाइयों के बीच परिवर्तित करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
अपडेट किया गया
CSS Unit Converter
Convert between all CSS units — px, rem, em, vw, vh, vmin, vmax, pt, pc, cm, mm, in, ex, ch — with real-time conversion tables, typography & spacing scales, responsive clamp() generator, device presets, breakpoint calculator, and Tailwind CSS equivalents.
Input
Device Viewport Presets
Viewport: 1440×900px
All Units — Real-time Conversion
| Unit | Name | Value | CSS | Tailwind | |
|---|---|---|---|---|---|
px | Pixels | 16 | 16px | 4 | |
rem | Root EM | 1 | 1rem | 4 | |
em | EM | 1 | 1em | 4 | |
vw | Viewport Width | 1.11111 | 1.11111vw | ||
vh | Viewport Height | 1.77778 | 1.77778vh | ||
vmin | Viewport Min | 1.77778 | 1.77778vmin | ||
vmax | Viewport Max | 1.11111 | 1.11111vmax | ||
pt | Points | 12 | 12pt | 4 | |
pc | Picas | 1 | 1pc | 4 | |
cm | Centimeters | 0.42333 | 0.42333cm | 4 | |
mm | Millimeters | 4.23333 | 4.23333mm | 4 | |
in | Inches | 0.16667 | 0.16667in | 4 | |
ex | x-height | 2 | 2ex | 4 | |
ch | Character Width | 1.66667 | 1.66667ch | 4 | |
% | Percentage | 1.11111 | 1.11111% | 4 |
अक्सर पूछे जाने वाले प्रश्न
मैं px को rem में कैसे बदलूं?
पिक्सेल को rem में बदलने के लिए, पिक्सेल वैल्यू को root font-size से विभाजित करें, जिसे browser डिफ़ॉल्ट रूप से 16px सेट करते हैं। इसलिए 24px है 24 / 16 = 1.5rem, 12px है 0.75rem, और 32px है 2rem। developer px से rem में जाने का कारण accessibility है: rem visitor के चुने हुए browser font-size के साथ स्केल होता है, जबकि hard-coded पिक्सेल इसे अनदेखा करते हैं, इसलिए टेक्स्ट उन लोगों के लिए पठनीय रहता है जो zoom करते हैं या font बड़ा करते हैं। यदि आपका प्रोजेक्ट अलग root size इस्तेमाल करता है, तो गणित बदलता है, इसलिए divisor आपके वास्तविक html font-size से मेल खाना चाहिए। यह कन्वर्टर इसे हर यूनिट में एक साथ तुरंत करता है, आपको 16px मानने के बजाय custom root font-size सेट करने देता है, और मैचिंग Tailwind class चिह्नित करता है (उदाहरण के लिए 16px text-base में मैप होता है) ताकि आप सीधे utility-class codebase में पेस्ट कर सकें।
CSS में em और rem में क्या अंतर है?
दोनों relative font-size यूनिट हैं, लेकिन वे अलग-अलग चीज़ों के विरुद्ध मापते हैं। rem हमेशा root एलिमेंट के font-size के सापेक्ष होता है, इसलिए 1rem पेज पर कहीं भी एक ही पिक्सेल वैल्यू के बराबर होता है, nesting के बावजूद। em current एलिमेंट के font-size के सापेक्ष होता है, जिसका मतलब है कि यह compound होता है: यदि parent 1.2em है और उसके अंदर child भी 1.2em है, तो child लगभग 1.44 गुना base पर रेंडर होता है, और गहरी nesting इसे और बढ़ाती है। वह compounding em को कंपोनेंट-लोकल scaling के लिए उपयोगी बनाती है जैसे padding जो अपने टेक्स्ट को ट्रैक करता है, लेकिन यह deep tree में आश्चर्य पैदा कर सकती है, जहाँ rem predictable रहता है। यह टूल आपको root font-size और parent font-size अलग-अलग सेट करने देता है, ताकि आप देख सकें कि आपके विशिष्ट nesting context में एक em वैल्यू rem के विरुद्ध कैसे हल होता है।
CSS में 1 inch, 1pt, और 1cm में कितने पिक्सेल होते हैं?
CSS आपके monitor के वास्तविक भौतिक आकार के बजाय एक निश्चित reference मानक का उपयोग करता है, इसलिए absolute यूनिट एक-दूसरे के सापेक्ष परिभाषित हैं। उस मानक द्वारा 1 inch 96px और 72pt के बराबर है, जिससे 1pt लगभग 1.333px और 1pc (pica) ठीक 16px होता है क्योंकि 1pc 12pt होता है। Metric यूनिट के लिए, 1cm लगभग 37.8px (96 को 2.54 से विभाजित) और 1mm लगभग 3.78px होता है। ये conversion print stylesheet में सबसे प्रासंगिक हैं, जहाँ point और भौतिक यूनिट वास्तव में कागज़ में मैप होते हैं, जबकि screen पर एक inch एक CSS abstraction है, न कि मापी गई inch। इन factor को याद रखने या हाथ से अंकगणित करने के बजाय, कोई भी वैल्यू इस कन्वर्टर में पेस्ट करें और यह px, pt, pc, cm, mm, और in में समकक्ष एक साथ लौटाता है, एक-क्लिक copy के साथ।
CSS में vmin और vmax में क्या अंतर है?
दोनों viewport यूनिट हैं जो viewport dimension के 1% के बराबर हैं, लेकिन वे अलग-अलग dimension चुनते हैं। vmin viewport के छोटी भुजा का 1% है, जबकि vmax बड़ी भुजा का 1%। एक portrait फ़ोन पर जहाँ चौड़ाई छोटी भुजा है, 10vmin चौड़ाई को ट्रैक करता है और 10vmax ऊँचाई को; landscape में घुमाएँ और दोनों बदल जाते हैं, क्योंकि orientation बदलने से छोटी भुजा बदलती है। इससे vmin उन एलिमेंट के लिए उपयोगी होता है जो दोनों orientation में पूरी तरह दिखने योग्य रहने चाहिए, जैसे एक वर्ग जो कभी overflow न करे, और vmax तब काम का होता है जब आप किसी चीज़ को dominant dimension के साथ स्केल करना चाहते हैं। नियमित vw और vh, इसके विपरीत, विशेष रूप से चौड़ाई और ऊँचाई पर लॉक होते हैं। यह कन्वर्टर आपको अपनी viewport चौड़ाई और ऊँचाई दर्ज करने देता है, फिर दिखाता है कि एक वैल्यू उस सटीक screen के लिए vw, vh, vmin, और vmax में कैसे हल होती है।
मैं clamp() के साथ screen size के बीच font size को आसानी से कैसे स्केल करूं?
clamp() function तीन वैल्यू लेता है — एक न्यूनतम, एक preferred, और एक अधिकतम — clamp(min, preferred, max) के रूप में लिखा जाता है। browser preferred वैल्यू का उपयोग करता है लेकिन कभी भी इसे न्यूनतम से नीचे या अधिकतम से ऊपर नहीं जाने देता। Fluid typography के लिए, preferred वैल्यू एक rem base को एक vw term के साथ जोड़ती है ताकि size दो breakpoint के बीच viewport चौड़ाई के साथ रैखिक रूप से बढ़े, फिर छोटी screen पर min पर और बड़ी screen पर max पर लॉक हो जाए। इससे वह टेक्स्ट बचता है जो हर media-query breakpoint पर अचानक कूदता है और इसके बजाय लगातार स्केल होता है। slope और intercept हाथ से निकालना चुभड़ है, इसलिए इस टूल का clamp generator आपके लिए करता है: एक न्यूनतम और अधिकतम size और वह viewport रेंज डालें जिसमें scaling हो, rem या px आउटपुट चुनें, और तैयार clamp() वैल्यू सीधे अपनी स्टाइलशीट में कॉपी करें।
Embed This Tool
Add a free, live version of this widget to your own website or blog post — it runs entirely in your visitors' browsers, with a credit link back to The Toolbox.
<iframe src="https://getthetoolbox.com/embed/css-unit-converter" title="CSS Unit Converter — The Toolbox" width="100%" height="260" style="max-width:480px;border:1px solid #e2e8f0;border-radius:12px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0"><a href="https://getthetoolbox.com/utility-tools/css-unit-converter?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free CSS Unit Converter</a> by The Toolbox</p>संबंधित टूल
मुफ़्त सुरक्षित पासवर्ड जनरेटर
अनुकूलन योग्य विकल्पों के साथ सुरक्षित, यादृच्छिक पासवर्ड बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त UUID/GUID जनरेटर
सार्वभौमिक रूप से अद्वितीय पहचानकर्ता (UUID/GUID) बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त QR कोड जनरेटर ऑनलाइन
URL, टेक्स्ट, WiFi क्रेडेंशियल और बहुत कुछ के लिए QR कोड बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त JSON फ़ॉर्मेटर और वैलिडेटर
सिंटैक्स हाइलाइटिंग और त्रुटि पहचान के साथ JSON डेटा को फ़ॉर्मेट, सत्यापित और सुंदर बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
CSS Unit Converter के बारे में
CSS Unit Converter एक single length वैल्यू को हर CSS unit में एक साथ उसके समकक्ष में बदलता है। एक संख्या टाइप करें, जिस यूनिट से आप शुरू कर रहे हैं उसे चुनें, और आप तुरंत पिक्सेल साथ ही 14 अन्य यूनिट में परिणाम पाते हैं — rem, em, percentage, viewport unit, point, और भौतिक यूनिट — साथ ही जहाँ एक मौजूद हो वहां matching Tailwind CSS class। यह front-end developer, designer, और किसी भी व्यक्ति के लिए बनाया गया है जो बिना हाथ से अंकगणित किए mockup को responsive स्टाइलशीट code में अनुवादित कर रहा है।
सब कुछ local रूप से आपके browser में चलता है। कोई sign-up नहीं, कोई upload नहीं, और कोई server round-trip नहीं — वैल्यू आपकी डिवाइस पर compute होती हैं, इसलिए टूल पेज load होने के बाद offline काम करता है और आप जो दर्ज करते हैं वह stored या transmitted नहीं होता।
15 यूनिट जिनके बीच convert करता है
CSS यूनिट तीन family में आते हैं, और converter सभी को हैंडल करता है, category द्वारा color-coded:
- Absolute —
px,pt,pc,cm,mm,in। निश्चित भौतिक आकार। CSS reference मानक द्वारा, 1in = 96px = 72pt, इसलिए 1pt लगभग 1.333px, 1cm ≈ 37.8px, और 1pc = 16px। ये print stylesheet में सबसे प्रासंगिक हैं। - Relative —
rem,em,%,ex,ch। किसी और चीज़ के विरुद्ध sized। एकremroot<html>font-size के सापेक्ष है (default 16px), एकemcurrent एलिमेंट के font-size के सापेक्ष है और nesting पर compound होता है, औरch"0" glyph की चौड़ाई है — पठनीय line length के लिए text को ~60–75ch तक cap करने के लिए उपयोगी। - Viewport —
vw,vh,vmin,vmax। प्रत्येक viewport dimension का 1% है;vminछोटी भुजा को ट्रैक करता है औरvmaxबड़ी भुजा को, जो portrait और landscape में एलिमेंट को दिखने योग्य रखता है।
चूँकि relative और viewport यूनिट context पर निर्भर करते हैं, converter आपको root और parent font-size, em nesting depth, viewport चौड़ाई और ऊँचाई, parent चौड़ाई, और ex/ch metric सेट करने देता है — ताकि संख्या आपके वास्तविक layout को दर्शाएँ बजाय एक generic assumption के।
px-to-rem conversion क्यों करना चाहिए
लोग ऐसा converter खोलने का सबसे आम कारण डिज़ाइन को निश्चित पिक्सेल से scalable rem यूनिट में ले जाना है। जब font size rem में सेट होती हैं, वे visitor की browser font-size preference के अनुसार respond करती हैं, जो एक accessibility फ़ायदा है जो hard-coded पिक्सेल match नहीं कर सकते। 16px root के साथ, 24px 1.5rem हो जाता है और 12px 0.75rem हो जाता है। Converter दोनों एक साथ दिखाता है और समकक्ष Tailwind token चिह्नित करता है (उदाहरण के लिए, 16px text-base और spacing-4 में मैप होता है), ताकि आप सीधे utility-class codebase में drop कर सकें।
बिल्ट-इन scale और responsive generator
One-off conversion से परे, टूल में systematic design काम के लिए generator शामिल हैं:
- Typography scale — एक base size और ratio जैसे Major Third (1.25), Perfect Fourth (1.333), या Golden Ratio (1.618) से एक modular type scale बनाएँ, ऊपर और नीचे step के साथ, और px/rem/em आउटपुट।
- Spacing scale — एक चुने हुए base grid (आमतौर पर 4px) पर एक consistent spacing system generate करें, px या rem में आउटपुट।
- Breakpoint converter — किसी भी वैल्यू को translate करें और Tailwind के breakpoint (sm 640, md 768, lg 1024, xl 1280, 2xl 1536) और सामान्य device चौड़ाई के विरुद्ध तुलना करें।
- Clamp generator — एक fluid
clamp(min, preferred, max)वैल्यू produce करें जो दो viewport चौड़ाई के बीच रैखिक रूप से scale हो, responsive typography के लिए आदर्श जो हर breakpoint पर jump करने के बजाय आसानी से बढ़ती है।
एक unit reference tab हर यूनिट का मतलब example और usage tip के साथ document करता है, और एक history panel आपके हाल के conversion हाथ में रखता है। हर परिणाम का एक one-click copy button है ताकि आप तैयार CSS सीधे अपनी स्टाइलशीट में paste कर सकें।