सीएसएस इकाइयों को समझना

<घंटा/>

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

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

<टेबल> <थेड> क्रमांक <थ> <वें>इकाई और नाम 1 सेमी
सेंटीमीटर (1 सेमी =100 मिमी)
2 में
इंच (1 इंच =2.54 सेमी)
3 मिमी
मिलीमीटर
4 पीसी
पिका (1 पीसी =12 पीटी)
5 पीटी
अंक (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;
}
#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>

आउटपुट

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

सीएसएस इकाइयों को समझना

'पूर्वावलोकन' clicking क्लिक करने के बाद नंबर फ़ील्ड सेट वाला बटन -

सीएसएस इकाइयों को समझना

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

<टेबल> <थेड> क्रमांक <थ> इकाई और संबंधित 1 %
मूल तत्व आयाम
2 उन्हें
तत्व का फ़ॉन्ट आकार
3 पूर्व
तत्व के फ़ॉन्ट की x-ऊंचाई
4 रेम
मूल तत्व का फ़ॉन्ट आकार
5 वीएच
व्यूपोर्ट की ऊंचाई का 1%
6 vmax
व्यूपोर्ट के बड़े आयाम का 1%
7 vmin
व्यूपोर्ट के छोटे आयाम का 1%
8 vw
व्यूपोर्ट की चौड़ाई का 1%

आइए 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>

आउटपुट

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

सीएसएस इकाइयों को समझना

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

सीएसएस इकाइयों को समझना