CSS इकाइयाँ बदलें — px, rem, em, vw, vh
px, rem, em, vw, vh और % के बीच बदलाव। root font size और viewport चौड़ाई दें — rem और viewport units आपके design system के करीब रहेंगे।
rem root font से; vw और % viewport चौड़ाई से।
design में px, code में rem — calculator खोले बिना यहाँ मिल जाता है।
vw/vh screen चौड़ाई पर depend — जिस breakpoint पर काम कर रहे हैं वही width डालें।
कैसे convert करें
- संख्या और from/to units चुनें
- root font और viewport चौड़ाई जाँचें
- नतीजा CSS में कॉपी करें
कब काम आए
- root 16 न हो तो rem गलती कम।
- laptop mock पर 40vw कितने px — जल्दी पता।
- account नहीं — paste और हो गया।
उपयोग
- Figma px spacing → CSS rem
- notebook width पर vw check
- rem vs em numbers से समझाना
टिप्स
- em यहाँ सरलता के लिए parent = root; component font अलग हो तो adjust करें।
- round-trip में छोटा float noise — CSS में आमतौर पर issue नहीं।
उदाहरण
| इनपुट | आउटपुट | नोट |
|---|---|---|
| 16px → rem (root 16) | 1rem | — |
| 1280px चौड़ाई पर 50vw | 640px | — |
अक्सर पूछे जाने वाले प्रश्न
- rem किस पर आधारित?
- यहाँ set root font size (अक्सर 16px)। html { font-size } अलग हो तो बदलें।
- % और vw एक जैसे?
- हमेशा नहीं। यहाँ % भी viewport field की चौड़ाई से approximate — container width जैसा सोचें।