CSS यूनिट्स को समझना

CSS यूनिट्स फॉन्ट-साइज, कैरेक्टर-साइज, व्यूपोर्ट डायमेंशन आदि जैसी विभिन्न श्रेणियों में आती हैं। मोटे तौर पर दो श्रेणियां हैं: एब्सोल्यूट और रिलेटिव यूनिट्स जिनमें उपरोक्त उप-श्रेणियां शामिल हैं।

निम्नलिखित CSS एब्सोल्यूट यूनिट्स हैं:

आइए 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; } #container {    display: flex; } .child{    margin: 5px 0;    height: 40px;    color: white;    border-width: 4px 0 4px 4px;    border-color: black;    border-style: solid; } .child:nth-of-type(1){    background-color: #FF8A00;    width:1cm; } .child:nth-of-type(2){    background-color: #F44336;    width:1in; } .child:nth-of-type(3){    background-color: #C303C3;    width:1mm; } .child:nth-of-type(4){ background-color: #4CAF50; width:1pc; } .child:nth-of-type(5){    background-color: #03A9F4;    width:1pt; } .child:nth-of-type(6){    background-color: #FEDC11;    width:1px;    border-right-width: 4px; } </style> </head> <body> <form> <fieldset> <legend>CSS-Absolute-Units</legend> <div id="container"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div><br> <div><span class="child">cm</span><span class="child">in</span><span class="child">mm</span><span class="child">pc</span><span class="child">pt</span><span class="child">px</span></div><br> <input type="number" id="numSelect" value="1" min="1"> <input type="button" onclick="changeWidth()" value="Preview"> <script> var numSelect = document.getElementById("numSelect"); function changeWidth() {    var divChild = document.getElementsByClassName('child');    for(var i=0; i<6; i++){       divChild[i].style.width = numSelect.value+divChild[i+6].textContent; }} </script> </body> </html>

आउटपुट

किसी बटन पर क्लिक करने से पहले:

'Preview' बटन पर क्लिक करने के बाद नंबर फील्ड सेट के साथ:

निम्नलिखित CSS रिलेटिव यूनिट्स हैं:

आइए CSS रिलेटिव यूनिट्स का एक उदाहरण देखते हैं:

उदाहरण

<!DOCTYPE html> <html> <head> <title>CSS Relative Units</title> <style> form {    width:70%;    margin: 0 auto;    text-align: center; } * {    padding: 2px;    margin:5px; } input[type="button"] {    border-radius: 10px; } #container {    display: flex; } .child{    margin: 5px 0;    height: 40px;    color: white;    border-width: 4px 0 4px 4px;    border-color: black;    border-style: solid; } .child:nth-of-type(1){    background-color: #FF8A00;    width:1%; } .child:nth-of-type(2){    background-color: #F44336;    width:1em; } .child:nth-of-type(3){    background-color: #C303C3;    width:1ex; } .child:nth-of-type(4){    background-color: #4CAF50;    width:1rem; } .child:nth-of-type(5){    background-color: #03A9F4;    width:1vh; } .child:nth-of-type(6){    background-color: #FEDC11;    width:1vw;    border-right-width: 4px; } </style> </head> <body> <form> <fieldset> <legend>CSS-Relative-Units</legend> <div id="container"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div><br> <div><span class="child">%</span><span class="child">em</span><span class="child">ex</span><span class="child">rem</span><span class="child">vh</span><span class="child">vw</span></div><br> <input type="number" id="numSelect" value="1" min="1"> <input type="button" onclick="changeWidth()" value="Preview"> <script> var numSelect = document.getElementById("numSelect"); function changeWidth() {    var divChild = document.getElementsByClassName('child');    for(var i=0; i<6; i++){       divChild[i].style.width = numSelect.value+divChild[i+6].textContent; }} </script> </body> </html>

आउटपुट

किसी बटन पर क्लिक करने से पहले:

'Preview' बटन पर क्लिक करने के बाद 'em' ऑप्शन चुने जाने और खाली टेक्स्ट फील्ड के साथ: