आकार और इकाइयाँ
आप पिक्सेल में एक फॉन्ट साइज़ सेट करते हैं, पृष्ठ भेजते हैं, और एक पाठक जिन्होंने आराम के लिए अपने ब्राउज़र पाठ को बढ़ा दिया है कोई बदलाव बिल्कुल नहीं देखता है। आप एक कार्ड को एक निश्चित चौड़ाई देते हैं और यह फोन पर ओवरफ्लो हो जाता है। दोनों एक ही सवाल में आते हैं: जब आप CSS में एक संख्या टाइप करते हैं, तो वह संख्या किसके विरुद्ध मापी जाती है? कुछ इकाइयाँ निश्चित हैं, कुछ एक फॉन्ट तक स्केल करती हैं, कुछ माता-पिता के लिए स्केल करती हैं, और कुछ स्क्रीन के लिए स्केल करती हैं। एक बार जब आप जानते हैं कि कौन सी है, आप अनुमान लगाना बंद कर देते हैं और उस इकाई को चुनते हैं जो काम करती है।
निरपेक्ष बनाम सापेक्ष इकाइयाँ
CSS इकाइयाँ दो परिवारों में विभाजित होती हैं। एक निरपेक्ष इकाई एक निश्चित आकार है जो कभी नहीं बदलता: px (एक पिक्सेल) वह है जो आप हर जगह देखेंगे। एक सापेक्ष इकाई एक आकार है जो किसी और चीज़ के लिए स्केल करता है, जैसे पाठक का फॉन्ट साइज़ या स्क्रीन की चौड़ाई।
एक कमरे को मापने के बारे में सोचें। सेंटीमीटर निरपेक्ष हैं: एक दीवार 400 सेमी है चाहे आप लंबे हों या छोटे। "मेरी तीन पदक्षेप" सापेक्ष है: यह इस बात पर निर्भर करता है कि किसके पैर चल रहे हैं। निरपेक्ष इकाइयाँ आपको सटीक नियंत्रण देती हैं; सापेक्ष इकाइयाँ पृष्ठ को उस व्यक्ति के अनुकूल बनाती हैं जो उसे देख रहा है।
यह अनुकूलन महत्वपूर्ण है। कुछ पाठक एक बड़ा डिफ़ॉल्ट पाठ आकार सेट करते हैं क्योंकि यह उनकी आँखों के लिए आसान है। यदि आप अपने पाठ को सापेक्ष इकाई में आकार देते हैं, तो उनकी सेटिंग के माध्यम से ले जाई जाती है और पृष्ठ उनके अनुरूप बढ़ता है। यदि आप इसे पिक्सेल में लॉक करते हैं, तो यह जगह पर रहता है और उन्हें अनदेखा करता है।
px जैसी निरपेक्ष इकाइयाँ एक निश्चित आकार हैं जो कभी नहीं बदलती हैं। सापेक्ष इकाइयाँ पाठक के फॉन्ट साइज़ या स्क्रीन की चौड़ाई जैसी किसी और चीज़ के लिए स्केल करती हैं। सापेक्ष इकाइयाँ पृष्ठ को उस व्यक्ति के अनुकूल बनाती हैं जो इसे देख रहा है, जो उन पाठकों के लिए महत्वपूर्ण है जो एक बड़े पाठ आकार को सेट करते हैं। पिक्सेल और जब वे ठीक हैं
एक पिक्सेल (px) लंबाई की एक छोटी निश्चित इकाई है। यह सबसे सीधी है, क्योंकि 16px हमेशा 16px होता है। जो यह एक अच्छा फिट है छोटी चीजों के लिए जो समान आकार में रहनी चाहिए: एक सीमा की मोटाई, एक छोटा गोल कोना, एक निश्चित आइकन।
.card {
border: 1px solid #ccc; /* एक बालों जैसी सीमा, हमेशा 1px */
border-radius: 8px; /* एक निश्चित गोल कोना */
}पकड़ यह है कि एक पिक्सेल पाठक की परवाह नहीं करता है। यदि किसी ने अपने ब्राउज़र को बड़ा पाठ दिखाने के लिए सेट किया है, तो एक शीर्षक जिसे आपने 24px पर लॉक किया है 24px पर रहता है और उनकी पसंद को अनदेखा करता है। यह है कि क्यों px सीमाओं और छोटे विवरण के लिए एक अच्छी पसंद है, लेकिन पाठ के लिए यह इकाई नहीं है।
px) एक निश्चित आकार है, इसलिए 16px हमेशा 16px होता है। जो यह छोटी चीजों के लिए एक अच्छा फिट है जो जगह पर रहनी चाहिए, जैसे एक 1px सीमा या एक छोटा गोल कोना। ट्रेड-ऑफ़ यह है कि px एक पाठक को अनदेखा करता है जिन्होंने बड़े पाठ सेट किया है, इसलिए यह पृष्ठ पर शब्दों के लिए इकाई नहीं है। em और rem
दो सापेक्ष इकाइयाँ एक फॉन्ट साइज़ के लिए स्केल करती हैं: em और rem। वह जिसके लिए पहुँचें rem है। यह पृष्ठ के रूट फॉन्ट साइज़ के विरुद्ध मापता है, जो पूरे दस्तावेज़ पर सेट किया गया आधार पाठ साइज़ है (डिफ़ॉल्ट रूप से 16px)। तो 1rem 16px है, 1.5rem 24px है, और 2rem 32px है।
h1 {
font-size: 2rem; /* 2 x 16px = 32px */
}
p {
font-size: 1rem; /* 16px, आधार आकार */
margin-bottom: 1.5rem; /* 24px नीचे की ओर स्पेस */
}क्योंकि rem उस एक रूट साइज़ के लिए बाँधा गया है, यह अनुमानित है: 1.5rem पृष्ठ पर हर जगह एक ही चीज़ का मतलब है। और जब कोई पाठक अपना डिफ़ॉल्ट पाठ साइज़ बढ़ाता है, तो rem में आकार की गई सब कुछ एक साथ बढ़ता है। दूसरी इकाई, em, तत्व के अपने फॉन्ट साइज़ के विरुद्ध स्केल करता है, जो उलझ सकता है, इसलिए rem से शुरु करें और आप शायद ही कभी पकड़े जाएँ।
rem और em दोनों एक फॉन्ट साइज़ के लिए स्केल करते हैं, और शुरुआत करने वाला rem है। यह पृष्ठ के रूट साइज़ के विरुद्ध मापता है, जो डिफ़ॉल्ट रूप से 16px है, इसलिए 1.5rem 24px है और हर जगह एक ही चीज़ का मतलब है। em तत्व के अपने फॉन्ट साइज़ के विरुद्ध स्केल करता है, जो उलझ सकता है, इसलिए पहले rem के लिए पहुँचें। प्रतिशत
एक प्रतिशत (%) एक तत्व को इसके माता-पिता के विरुद्ध आकार देता है। चौड़ाई के लिए, width: 50% का अर्थ है जिस बॉक्स के अंदर तत्व बैठता है उसकी चौड़ाई का आधा, जो भी चौड़ाई हो।
.sidebar {
width: 25%; /* माता-पिता की चौड़ाई का एक चौथाई */
}
.content {
width: 75%; /* बाकी तीन चौथाई */
}यह वह है जो एक लेआउट को द्रव बनाता है: क्योंकि चौड़ाई माता-पिता के अंश हैं, वे सिकुड़ते हैं और माता-पिता के रूप में बढ़ते हैं। खिड़की को पुनः आकार दें और एक 50% कॉलम आधी चौड़ाई रहता है बजाय एक निश्चित 500px कॉलम के तरीके में फैलने के। यह लचीलापन है कि क्यों प्रतिशत प्रतिक्रियाशील डिज़ाइन में अक्सर दिखाई देते हैं।
width: 50% जिस बॉक्स के अंदर तत्व बैठता है उसकी चौड़ाई का आधा है। यह कॉलम को द्रव बनाता है: खिड़की को पुनः आकार दें और वे फैलते और सिकुड़ते हैं बजाय फैलने के। यह लेआउट के पीछे मुख्य उपकरणों में से एक है जो किसी भी स्क्रीन के लिए फिट होते हैं। व्यूपोर्ट इकाइयाँ
व्यूपोर्ट इकाइयाँ ब्राउज़र विंडो के विरुद्ध आकार देती हैं। vw व्यूपोर्ट चौड़ाई का एक प्रतिशत है और vh व्यूपोर्ट ऊँचाई का एक प्रतिशत है, जहाँ व्यूपोर्ट पृष्ठ का दृश्यमान क्षेत्र है। तो 100vw विंडो की पूरी चौड़ाई है और 100vh इसकी पूरी ऊँचाई है।
.hero {
height: 100vh; /* पूरी स्क्रीन ऊँचाई भरता है */
}यह एक पूर्ण-स्क्रीन अनुभाग के लिए जाना जाता है, जैसे एक लैंडिंग बैनर जो किसी भी आकार की विंडो को भरना चाहिए। क्योंकि इकाइयाँ विंडो को ट्रैक करती हैं, अनुभाग पूर्ण-स्क्रीन रहता है जब कोई पुनः आकार देता है या अपना उपकरण घुमाता है, एक निश्चित पिक्सेल ऊँचाई सेट किए बिना जो केवल एक स्क्रीन पर सही होगी।
vw और vh ब्राउज़र विंडो के विरुद्ध आकार देते हैं: 100vw इसकी पूरी चौड़ाई है और 100vh इसकी पूरी ऊँचाई है। वे एक पूर्ण-स्क्रीन अनुभाग जैसे एक लैंडिंग बैनर के लिए जाना जाता है, क्योंकि यह पूर्ण-स्क्रीन रहता है जब विंडो पुनः आकार देता है बजाय एक पिक्सेल ऊँचाई के लिए लॉक किया जाए।