CSS निरपेक्ष और सापेक्ष इकाइयाँ

<घंटा/>

CSS निरपेक्ष इकाइयाँ और सापेक्ष इकाइयाँ दोनों दूरी इकाइयों की श्रेणी में आती हैं।

CSS सापेक्ष इकाइयाँ किसी अन्य तत्व के संदर्भ में एक तत्व की लंबाई को परिभाषित करती हैं।

उदाहरण के लिए, vh सापेक्ष इकाई व्यूपोर्ट ऊंचाई के सापेक्ष है।

CSS सापेक्ष इकाइयाँ निम्नलिखित हैं -

Sr.No	इकाई और इससे संबंधित
1	% मूल तत्व आयाम
2	उन्हें तत्व का फ़ॉन्ट आकार
3	पूर्व तत्व के फ़ॉन्ट की x-ऊंचाई
4	एलएच तत्व की रेखा ऊंचाई
5	रेम मूल तत्व का फ़ॉन्ट आकार
6	rlh मूल तत्व की रेखा ऊंचाई
7	vb रूट तत्व के ब्लॉक अक्ष में व्यूपोर्ट के आकार का 1%
8	vh व्यूपोर्ट की ऊंचाई का 1%
9	vmax व्यूपोर्ट के बड़े आयाम का 1%
10	vmin व्यूपोर्ट के छोटे आयाम का 1%
11	vw व्यूपोर्ट की चौड़ाई का 1%

उदाहरण

आइए CSS सापेक्ष इकाइयों के लिए एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<title>CSS Relative Units</title>
<style>
html{
   font-size: 14px;
   line-height: normal;
}
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#textContain {
   font-size: 20px;
   line-height: 2;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Relative-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="1" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="em" checked><label>em</label>
<input class="radio" type="radio" name="heading" value="rem"><label>rem</label>
<input class="radio" type="radio" name="heading" value="vw"><label>vw</label>
<input class="radio" type="radio" name="heading" value="vh"><label>lh</label>
<input class="radio" type="radio" name="heading" value="ex"><label>ex</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
   if(textSelect.value === '')
      textPreview.textContent = 'Type some text first';
   else{
      for(var i=0; i<5; i++){
         var radInp = document.getElementsByClassName('radio')[i];
         if(radInp.checked === true){
            textPreview.textContent = textSelect.value;
            textPreview.style.fontSize = numSelect.value+radInp.value
         }
      }
   }
}
</script>
</body>
</html>

आउटपुट

उपरोक्त कोड के लिए आउटपुट निम्नलिखित है -

किसी भी बटन को क्लिक करने से पहले -

CSS निरपेक्ष और सापेक्ष इकाइयाँ

'em' विकल्प के साथ 'पूर्वावलोकन' बटन पर क्लिक करने के बाद चयनित और खाली टेक्स्ट फ़ील्ड -

CSS निरपेक्ष और सापेक्ष इकाइयाँ

'रेम' विकल्प के साथ 'पूर्वावलोकन' बटन पर क्लिक करने के बाद चयनित और गैर-खाली टेक्स्ट फ़ील्ड -

CSS निरपेक्ष और सापेक्ष इकाइयाँ

'एम' विकल्प के साथ 'पूर्वावलोकन' बटन पर क्लिक करने के बाद चयनित और गैर-खाली टेक्स्ट फ़ील्ड -

CSS निरपेक्ष और सापेक्ष इकाइयाँ

CSS निरपेक्ष इकाइयाँ निम्नलिखित हैं -

Sr.No	इकाई और नाम
1	सेमी सेंटीमीटर (1 सेमी =100 मिमी)
2	इन इंच (1 इंच =2.54 सेमी)
3	मिमी मिलीमीटर
4	पीसी पिका (1 पीसी =12 पीटी)
5	pt अंक (1 पीटी =1/72 इंच)
6	px पिक्सेल (1 पीएक्स =0.75 पीटी)

उदाहरण

आइए CSS निरपेक्ष इकाइयों के लिए एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<title>CSS Absolute Units</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Absolute-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="10" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="pc"><label>pc</label>
<input class="radio" type="radio" name="heading" value="pt"><label>pt</label>
<input class="radio" type="radio" name="heading" value="px" checked><label>px</label>
<input class="radio" type="radio" name="heading" value="in"><label>in</label>
<input class="radio" type="radio" name="heading" value="cm"><label>cm</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
   if(textSelect.value === '')
      textPreview.textContent = 'Type some text first';
   else{
      for(var i=0; i<5; i++){
         var radInp = document.getElementsByClassName('radio')[i];
         if(radInp.checked === true){
            textPreview.textContent = textSelect.value;
            textPreview.style.fontSize = numSelect.value+radInp.value
         }
      }
   }
}
</script>
</body>
</html>

आउटपुट

उपरोक्त कोड के लिए आउटपुट निम्नलिखित है -

किसी भी बटन को क्लिक करने से पहले -

CSS निरपेक्ष और सापेक्ष इकाइयाँ

'पीएक्स' विकल्प के साथ 'पूर्वावलोकन' बटन पर क्लिक करने के बाद चयनित और गैर-रिक्त टेक्स्ट फ़ील्ड -

CSS निरपेक्ष और सापेक्ष इकाइयाँ

'पीटी' विकल्प के साथ 'पूर्वावलोकन' बटन पर क्लिक करने के बाद चयनित और गैर-रिक्त टेक्स्ट फ़ील्ड -

CSS निरपेक्ष और सापेक्ष इकाइयाँ

'पीसी' विकल्प के साथ 'पूर्वावलोकन' बटन पर क्लिक करने के बाद चयनित और गैर-खाली टेक्स्ट फ़ील्ड -

CSS निरपेक्ष और सापेक्ष इकाइयाँ