การทำความเข้าใจหน่วย CSS

หน่วย CSS มีหลายประเภท เช่น ขนาดฟอนต์ ขนาดอักขระ ขนาดวิวพอร์ต ฯลฯ โดยทั่วไปแล้วจะมีหน่วยสัมบูรณ์และหน่วยที่เกี่ยวข้องกัน 2 หมวดหมู่ซึ่งประกอบด้วยหมวดหมู่ย่อยที่กล่าวถึงข้างต้น

ต่อไปนี้เป็นหน่วยสัมบูรณ์ CSS -

ซีเนียร์	หน่วยและชื่อ
1	ซม. เซนติเมตร (1 ซม. =100 มม.)
2	ใน นิ้ว (1 นิ้ว =2.54 ซม.)
3	มม มิลลิเมตร
4	พีซี Picas (1 ชิ้น =12 pt)
5	pt คะแนน (1 pt =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>

ผลลัพธ์

ก่อนคลิกปุ่มใด ๆ −

การทำความเข้าใจหน่วย CSS

หลังจากคลิก 'ดูตัวอย่าง' ปุ่มพร้อมช่องตัวเลข −

การทำความเข้าใจหน่วย CSS

ต่อไปนี้เป็นหน่วยสัมพันธ์ CSS -

ซีเนียร์	หน่วย &สัมพันธ์กับ
1	% ขนาดองค์ประกอบหลัก
2	พวกมัน ขนาดตัวอักษรขององค์ประกอบ
3	อดีต ความสูง x ของแบบอักษรขององค์ประกอบ
4	เรม ขนาดตัวอักษรขององค์ประกอบรูท
5	vh 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>

ผลลัพธ์

ก่อนคลิกปุ่มใด ๆ −

การทำความเข้าใจหน่วย CSS

หลังจากคลิก 'ดูตัวอย่าง' ปุ่มที่มี ‘em’ ตัวเลือกที่เลือกและช่องข้อความว่าง -

การทำความเข้าใจหน่วย CSS