หน่วยวัดแบบ Absolute และ Relative ใน CSS

หน่วยวัดระยะทางใน CSS แบ่งเป็น 2 ประเภทหลักคือ Absolute Units (หน่วยคงที่) และ Relative Units (หน่วยสัมพัทธ์)

Relative Units (หน่วยสัมพัทธ์)

กำหนดขนาดโดยอ้างอิงจากองค์ประกอบอื่น เช่น vh อ้างอิงจากความสูงของ viewport

ตัวอย่าง Relative Units

<!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>vh</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>

ผลลัพธ์ Relative Units

ก่อนกดปุ่ม:

เลือก em, ช่องว่าง:

เลือก rem, มีข้อความ:

เลือก em, มีข้อความ:

Absolute Units (หน่วยคงที่)

ขนาดคงที่ ไม่ขึ้นกับบริบท ใช้สำหรับพิมพ์ (print) เป็นหลัก

ตัวอย่าง Absolute Units

<!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>

ผลลัพธ์ Absolute Units

ก่อนกดปุ่ม:

เลือก px:

เลือก pt:

เลือก pc:

แนวทางเลือกใช้งาน

• Relative (rem, em, %, vw/vh) - เหมาะสำหรับ Responsive Design เว็บสมัยใหม่
• Absolute (px, pt, cm) - ใช้สำหรับ Print Stylesheet หรือเมื่อต้องการขนาดคงที่แม่นยำ