CSS => लंबाई की इकाइयाँ

परिचय

CSS दूरी माप एक संख्या है जिसके तुरंत बाद एक लंबाई इकाई (px, em, pc, in,…) होती है।

सीएसएस कई लंबाई माप इकाइयों का समर्थन करता है। वे पूर्ण या सापेक्ष हैं।

वाक्य - विन्यास

मूल्य इकाई
1em

पैरामीटर

इकाई	विवरण
%	मूल वस्तुओं या संपत्ति पर निर्भर वर्तमान वस्तु के संदर्भ में आकारों को परिभाषित करें
एम	तत्व के फ़ॉन्ट-आकार के सापेक्ष (2em का अर्थ है वर्तमान फ़ॉन्ट के आकार का 2 गुना)
रेम	रूट तत्व के फ़ॉन्ट-आकार के सापेक्ष
VW	व्यूपोर्ट की चौड़ाई के 1% के सापेक्ष *
VH	व्यूपोर्ट की ऊंचाई के 1% के सापेक्ष *
vmin	व्यूपोर्ट के * छोटे आयाम के 1% के सापेक्ष
VMAX	व्यूपोर्ट के * बड़े आयाम के 1% के सापेक्ष
से। मी	सेंटीमीटर
मिमी	मिलीमीटर
में	इंच (1in = 96px = 2.54 सेमी)
पिक्सल	पिक्सल (1 पीएक्स = 1/96 का 1 इंच)
pt	अंक (1in का 1/pt = 1/72)
पीसी	पिचास (1 pc = 12 pt)
रों	सेकंड (एनिमेशन और बदलाव के लिए उपयोग किया जाता है)
सुश्री	मिलीसेकंड (एनिमेशन और बदलाव के लिए उपयोग किया जाता है)
भूतपूर्व	वर्तमान फ़ॉन्ट की x-ऊँचाई के सापेक्ष
ch	शून्य (0) वर्ण की चौड़ाई के आधार पर
fr	आंशिक इकाई (सीएसएस ग्रिड लेआउट के लिए प्रयुक्त)

टिप्पणियों

एक व्हाट्सएप नंबर और यूनिट के बीच दिखाई नहीं दे सकता है। हालांकि, यदि मान 0 है, तो इकाई को छोड़ा जा सकता है।
कुछ सीएसएस गुणों के लिए, नकारात्मक लंबाई की अनुमति है।

फ़ॉन्ट आकार

CSS3, rem यूनिट सहित कुछ नई इकाइयों का परिचय देता है, जो "रूट एम" के लिए है। कैसे पर आइए नज़र rem काम करता है।

पहले, आइए em और rem बीच के अंतरों को देखें।

em : माता-पिता के फ़ॉन्ट आकार के सापेक्ष। यह कंपाउंडिंग समस्या का कारण बनता है
रेम : रूट या <html> तत्व के फ़ॉन्ट आकार के सापेक्ष। इसका मतलब यह है कि html तत्व के लिए एक ही फॉन्ट साइज़ घोषित करना और सभी rem यूनिट्स को एक प्रतिशत के रूप में परिभाषित करना संभव है।

फ़ॉन्ट आकार के लिए rem का उपयोग करने के साथ मुख्य मुद्दा यह है कि मानों का उपयोग करना कुछ कठिन है। यहाँ कुछ सामान्य फ़ॉन्ट आकारों का उदाहरण दिया गया है जो rem इकाइयों में व्यक्त किए गए हैं, यह मानते हुए कि आधार का आकार 16px है:

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (बेस)
18px = 1.125rem
20px = 1.25rem
जीपीएक्स = 1.5 ग्राम
30px = 1.875rem
32px = 2rem

कोड:

html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}

रीम्स और ईएमएस का उपयोग करके स्केलेबल तत्वों का निर्माण

आप अपने html टैग के font-size द्वारा परिभाषित rem को स्टाइल तत्वों में उनके font-size को rem मान पर सेट करके उपयोग कर सकते हैं और em अंदर एलिमेंट का उपयोग उन तत्वों को बनाने के लिए कर सकते हैं जो आपके ग्लोबल font-size साथ स्केल करते हैं।

HTML:

<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

प्रासंगिक सीएसएस:

html {
  font-size: 16px;
}

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;
}

input[type="range"] {
  font-size: 1rem;
  width: 10em;
}

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;
}

संभावित परिणाम:

vh और vw

CSS3 ने आकार का प्रतिनिधित्व करने के लिए दो इकाइयों की शुरुआत की।

vh , जो viewport height के लिए है, viewport height 1% के सापेक्ष है
vw , जो viewport width के लिए है, viewport width 1% के सापेक्ष है

div { 
  width: 20vw; 
  height: 20vh;
}

ऊपर, div के लिए आकार व्यूपोर्ट की चौड़ाई और ऊंचाई का 20% लेता है

vmin और vmax

vmin : व्यूपोर्ट के छोटे आयाम के 1 प्रतिशत के सापेक्ष
vmax : व्यूपोर्ट के बड़े आयाम के 1 प्रतिशत के सापेक्ष

दूसरे शब्दों में, 1 vmin 1 vh और 1 vw के छोटे के बराबर है

1 vmax 1 vh और 1 vw के बड़े के बराबर है

नोट : vmax में समर्थित नहीं है:

Internet Explorer का कोई भी संस्करण
संस्करण 6.1 से पहले सफारी

प्रतिशत का उपयोग कर

उत्तरदायी एप्लिकेशन बनाते समय उपयोगी इकाई में से एक।

इसका आकार इसके मूल कंटेनर पर निर्भर करता है।

समीकरण:

(पेरेंट कंटेनर की चौड़ाई) * (प्रतिशत (%)) = आउटपुट

उदाहरण के लिए:

माता-पिता की 100px चौड़ाई है जबकि बच्चे के पास 50% है ।

आउटपुट पर , बच्चे की चौड़ाई माता-पिता की आधी (50%) होगी, जो कि 50px है ।

एचटीएमएल

<div class="parent">
   PARENT
   <div class="child">
     CHILD
   </div>
</div>

सीएसएस

<style>

*{
  color: #CCC;
}

.parent{
  background-color: blue;
  width: 100px;
}

.child{
  background-color: green;
  width: 50%;
}

</style>

आउटपुट

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

CSS
लंबाई की इकाइयाँ

खोज…