Difference Between PX EM REM % VW VH | Css Size Units Explained |

आपके मन में ये बात कभी ना कभी जरुर आई होगी की आखिर ये PX, EM, REM, %, VW, VH होते क्या है और इनका इस्तेमाल हम कहा कर सकते है ? अगर इस सवाल का जवाब चाहिए तो आपको आज का आर्टिकल पूरा ध्यान से पढना होगा |

आइये बात करते है (Difference between PX EM REM % VW VH) के बारे में, एलिमेंट के साथ डिजाइन करते समय, आप देखते हैं कि कुछ Element में size  बदलने के विकल्प हैं, जिससे आप px , EM , REM ,%, VW , या VH चुन सकते हैं। लेकिन उन विकल्पों का वास्तव में क्या मतलब है, और आपको एक दूसरे का उपयोग कब करना चाहिए?

आप चाहें तो github पर भी चेक कर सकते हैं |

Difference between PX EM REM % VW VH की मूल बातें |

CSS में, आप size की विभिन्न unit का उपयोग करके element के आकार या लंबाई set कर सकते हैं। माप की इकाइयाँ जो आपको कुछ विकल्पों में मिलेंगी, उनमें PX, EM, REM,%, VW और VH शामिल हैं, हालाँकि CSS में कई और भी उपलब्ध हैं।

विभिन्न unit के बारे में जानने के लिए सबसे महत्वपूर्ण पहलू यह है कि कुछ units , जैसे कि PX absolute units हैं, और कुछ relative units हैं।

अब एक सवाल ये भी आ गया की Absolute units और relative units क्या होते है ? ( Absolute units (Difference between PX EM REM % VW VH) )

Absolute units (Difference between PX EM REM % VW VH)

PX : Pixcels (PX) को पूर्ण units माना जाता है, हालांकि वे DPI और देखने वाले डिवाइस के relative है। लेकिन डिवाइस पर ही, PX यूनिट तय है और किसी अन्य element के आधार पर नहीं बदलता है। लेकिन साइटों के लिए PX का उपयोग करना time waste हो सकता है, लेकिन वे कुछ element के लिए एक ही size बनाए रखने के लिए उपयोगी होते हैं। उदहारण के तोर पर अगर आप चाहते है की h1 की font size जो डेस्कटॉप या लैपटॉप में है उतनी ही font size मोबाइल में या other device में होनी चाहिए तो उस स्थिति में आपके पास PX का उपयोग करना एक अच्छा विकल्प है।

Relative units (Difference between PX EM REM % VW VH)

EM : EM unit is relative to the parent element

REM: Relative to the root element (HTML tag)

%: unit is relative to the parent element

VW: Relative to viewport’s width

VH: Relative to viewport’s height

PX के opposite, %, EM, और REM जैसी units responsive डिज़ाइन ( responsive डिज़ाइन का मतलब हुवा की desktop से मोबाइल तक के सफ़र में चाहें कोई भी device हो |) करने में मदद करती हैं। Relative Units विभिन्न divices पर बेहतर दिखती है क्योंकि वे दूसरे elements के size के अनुसार ऊपर और नीचे scale(बदलाव) कर सकती हैं।

( Difference between PX EM REM % VW VH )

Difference between PX EM REM % VW VH का एक सरल उदाहरण देखें।

अधिकांश browsers में, default font की size 16px है। Relative Units इस आधार से size की गणना करती हैं। यदि आप CSS के माध्यम से HTML टैग के लिए base size define करके उस base को बदलते हैं, तो वह पूरे page पर relative units की गणना का आधार बन जाता है। इसी तरह, यदि कोई उपयोगकर्ता अपने font size को adjust करता है, तो वह relative units की गणना का आधार बन जाता है।

तो 16px के default से निपटने के दौरान इन units का क्या अर्थ है?

आपके द्वारा डिफाइन की गई size को default size से गुणा करेगी।

1em = 16px (1 * 16)

2em = 32px (2 * 16)

.5em = 8px (.5 * 16)

1REM = 16px

2REM = 32px

.5REM = 8px

100% = 16px

200% = 32px

50% = 8px

यहां तक तो ठीक है, लेकिन क्या होगा यदि आप या user default size बदलते हैं? क्योंकि ये Relative units  हैं, अंतिम size मान नए आधार size पर आधारित होंगे। हालांकि default 16px है, यदि आपने या उपयोगकर्ता ने इसे 14px में बदल दिया है, तो परिकलित आकार समाप्त हो जाएंगे:

1em = 14px (1 * 14)

2em = 28px (2 * 14)

.5em = 7px (.5 * 14)

1REM = 14px

2REM = 28px

.5REM = 7px

100% = 14px

200% = 28px

50% = 7px

यह user को आपके द्वारा निर्दिष्ट प्रत्येक element के relative units को बनाए रखते हुए, अपने default browser font size को adjust करने की स्वतंत्रता देता है।

Difference-between-PX-EM-REM-%-VW-VH

EM और REM में क्या अंतर है?

em-vs-rem

ऊपर दिए गए चार्ट को देखते हुए, यह दिखाता है कि EM और REM बिल्कुल एक जैसे दिख रहे हैं। तो वे कैसे अलग होते हैं?

सीधे शब्दों में कहें, वे inheritance के आधार पर अलग होते हैं। जैसा कि बताया गया है, REM Root Element (HTML) पर आधारित है। सभी Child element जो REM का उपयोग करता है, उसके बाद HTML root size  को scale के रूप में उपयोग करेगा, भले ही Parent Element में कोई अलग size define हो या न हो।

दूसरी ओर, EM Parent element के font size पर आधारित है। अगर Parent element की size Root element से अलग है तो EM Parent element के आधार पर साइज set करेगा

तो %, VW और VH के बारे में क्या? वे सब किस बारे में हैं?

( Difference between PX EM REM % VW VH )

PX, EM, और REM मुख्य रूप से font size के लिए उपयोग किए जाते हैं, %, VW, और VH ज्यादातर margin, padding, spacing और height/width के लिए उपयोग किए जाते हैं।

VH “Viewport Height” के लिए है, जो Visual screen की height है। 100VH Viewport की height या स्क्रीन की पूरी height के 100% का हिस्सा कवर करेगा। और निश्चित रूप से, VW का अर्थ “Viewport width” है, जो Visual Screen की चौड़ाई है। 100VW Viewport की Width या Screen की पूरी Width के 100% का हिस्सा कवर करेगा। Viewport के Size की परवाह किए बिना, % Parent Element के Size का Percent दर्शाता है।

आइए कुछ उदाहरण देखें जहां Element %, VW और VH Option देता है।

( Difference between PX EM REM % VW VH )

Column Width: % का उपयोग करते समय कॉलम की Width % में ही सबसे अच्छी तरह काम करती है तो % के अलावा इससे अच्छा कोई दूसरा Option नहीं है

Margin: एक Section का मार्जिन या तो पीएक्स या % में Define किया जा सकता है। उदाहरण के लिए मोबाइल डिवाइस के लिए Scaling करते समय Margin Element से बड़ा न हो, यह सुनिश्चित करने के लिए आमतौर पर % का उपयोग करना बेहतर होता है। Device की Width के Percent का उपयोग करके, आपका Margin Element के Size के Relative बना रहेगा, जो लगभग हमेशा बेहतर होता है।

Padding: एक Section की Padding या तो PX, EM, या% में Define की जा सकती है। Margin के साथ, EM या % का उपयोग करना अक्सर बेहतर होता है, इसलिए Padding पेज scale के आकार के Relative बनी रहती है।

Font Size: यदि आप किसी Elemetn की Design करते हैं, जैसे Heading, 

क्या आपने कभी एक Main Heading बनाई है और यह देखा है की यह Desktop पर कितना अच्छा लग रहा था, और यह मोबाइल में कितना ख़राब लग रहा है.

इसे अच्छे ढंग से हल करने के लिए PX की जगह EM, REM, VW, VH का उपयोग करना है। आप क्या Size चुने वह आप पर निर्भर करता है. मैं आमतौर पर EM चुनता हूं क्योंकि मैं चाहता हूं कि Size Heading के Parent Element के Relative हो। लेकिन अगर आप चाहते हैं कि Size Root(HTML) size के Relative हो, तो इसके बजाय REM चुनें। या, यदि यह आपके मामले के लिए बेहतर काम करता है, तो आप इसे Viewport Width (VW) के Relative सेट कर सकते हैं।

अगर आप REM Use से करते हो तो ध्यान रहे की आप Root की Size भी अपने Breakpoint में चेंज करते रहे जैसे Desktop में Root की Font Size 16PX है तो Mobile में आप इसको 12 PX कर दे जिससे Heading भी Scale होकर छोटी होती जायेगी.

आइए एक Mobile Screen Viewport के उदाहरण पर विचार करें जो 480px x 800px है।

1 VW = Viewport Width का 1% (या 4.8px)

50 VW = Viewport Width का 50% (या 240px)

1 VH = Viewport Height का 1% (या 8px)

50 VH= Viewport Height का 50% (या 400px)

यदि Viewport का Size बदलता है, तो Element का Size बदल जाता है।

आपको एक Unit को दूसरे पर कब Use करना चाहिए?

( Difference between PX EM REM % VW VH )

इस सवाल का कोई सटीक जवाब नहीं है। यदि आप Element के Size को उसके Parent के Size के आधार पर मापना चाहते हैं, तो EM का उपयोग करें। ( Difference between PX EM REM % VW VH )

REM Root (HTML) Font size के Relative है, इसलिए यदि आप Root Element  के आधार पर Element के Size को मापना चाहते हैं, तो REM का उपयोग करें। यदि आपने EM का उपयोग किया है और बहुत सारे Nested Elements के कारण Size देने में समस्याएँ आ रही हैं, तो REM बेहतर Option होगा।

VW Full Width वाले Element (100%) बनाने के लिए Useful है जो पूरे Viewport की Width को भरते हैं। आप Viewport की Width के किसी भी प्रतिशत का Use कर सकते हैं, जैसे कि Half Width के लिए 50%, आदि।

VH Full Height वाले Element (100%) बनाने के लिए Useful है जो पूरे Viewport की Height को भरते हैं। आप Viewport की Height के किसी भी प्रतिशत का Use कर सकते हैं, जैसे कि Half Height के लिए 50%, आदि।

% VW और VH के समान है लेकिन यह लंबाई नहीं है जो व्यूपोर्ट की चौड़ाई या ऊंचाई के सापेक्ष है। इसके बजाय, यह मूल तत्व की चौड़ाई या ऊंचाई का प्रतिशत है। उदाहरण के तौर पर, मार्जिन की चौड़ाई निर्धारित करने के लिए प्रतिशत इकाइयां अक्सर उपयोगी होती हैं।

आपको html के और भी ब्लॉग पढ़ने है तो आप निचे दिए गये लिंक पर क्लिक कर के पढ़ सकते है

  1. HTML Owl Carousel Slider
  2. HTML मैं एनीमेशन कैसे लगाएँ
  3. Slick Slider Tutorial

CSS unit क्या है ?

CSS unit किसी भी element के साइज़ और elements के बिच gap को control कर सकता है |

Absolute Units क्या है ?

Absolute Units वे यूनिट्स होती हैं जिनकी साइज़ डिवाइस मैं fix होती हैं | उदहारण के तोर पर अगर आप किसी element की font साइज़ को 20px देते हैं तो वह font साइज़ डेस्कटॉप से लेकर मोबाइल तक 20px ही रहेगी जब तक बिच मैं कोई और CSS ना करें |

Relative units क्या है ?

Relative units को responsive यूनिट भी कह सकते हैं क्योंकि ये fix नहीं रहती हैं, डेस्कटॉप से मोबाइल तक आनें मैं Relative units अपना साइज़ बदल सकती हैं |
कुछ Relative units हैं –
1. EM : EM unit is relative to the parent element
2. REM: Relative to the root element (HTML tag)
3. %: unit is relative to the parent element
4. VW: Relative to viewport’s width
5. VH: Relative to viewport’s height

कितनें प्रकार की CSS units हैं ?

मूल तौर पर 2 प्रकार की CSS यूनिट यूनिट हैं पहली Relative units और दूसरी Absolute Units.

Conclusion

आसा करता हूँ दोस्तों आपको आज के Difference between PX EM REM % VW VH आर्टिकल मै दि गयी जानकारी समझ में आयी होगी और आपकी कुछ help हुई होगी | अगर आपके मन मै कोई भी सवाल है तो आप comment कर सकते है |

धन्यवाद

Leave a Comment