CSS Unit Converter: คู่มือแปลงหน่วย px, rem, em และหน่วย Responsive

การออกแบบเว็บไซต์ในยุคปัจจุบันไม่ได้จบอยู่ที่การเลือกสีหรือจัด layout เท่านั้น แต่ยังมีรายละเอียดเรื่อง "หน่วย" ของ CSS ที่นักออกแบบและนักพัฒนาต้องจัดการอยู่ทุกวัน ไม่ว่าจะเป็น px, rem, em, %, vw หรือ vh แต่ละหน่วยมีพฤติกรรมต่างกัน บางหน่วยมีค่าคงที่ บางหน่วยเปลี่ยนตามขนาดตัวอักษร หรือเปลี่ยนตามขนาดหน้าจอ การแปลงค่าระหว่างหน่วยเหล่านี้ด้วยมือจึงทั้งเสียเวลาและเสี่ยงต่อความผิดพลาด

CSS Unit Converter คือเครื่องมือฟรีที่ช่วยให้การแปลงหน่วย CSS เป็นเรื่องง่าย รองรับครบทั้ง px, rem, em, %, vw, vh และ pt สามารถกำหนด base font size รวมถึงขนาด viewport width และ height ได้เอง ผลลัพธ์อัปเดตอัตโนมัติทันทีที่พิมพ์ค่า พร้อมปุ่มสลับหน่วยและคัดลอกผลลัพธ์ไปใช้ในโค้ดได้ทันที

ในบทความนี้ เราจะพาไปทำความเข้าใจว่าหน่วย CSS แต่ละตัวทำงานอย่างไร เครื่องมือนี้มีวิธีคิดคำนวณแบบไหน และมี use case จริงอะไรบ้างที่คุณนำไปใช้ได้ทันที ตั้งแต่การแปลงดีไซน์จาก Figma ไปจนถึงการสร้าง layout แบบ responsive เต็มรูปแบบ

ทำไมต้องใช้ CSS Unit Converter?

• ลดความผิดพลาดจากการคำนวณด้วยมือ — การแปลงหน่วยอย่าง em หรือ % ต้องอาศัยค่าฐาน การคิดในหัวหรือใช้เครื่องคิดเลขทั่วไปมีโอกาสพลาดสูง โดยเฉพาะเมื่อต้องแปลงหลายค่าติดกัน
• ประหยัดเวลาในการทำงาน — ไม่ต้องเปิดสเปรดชีตหรือเขียนสูตรเอง แค่พิมพ์ค่าลงไป ผลลัพธ์ก็ปรากฏทันที เหมาะกับงานที่ต้องแปลงค่าบ่อย ๆ ระหว่างพัฒนา
• รองรับการทำงานแบบ responsive — หน่วยอย่าง vw และ vh ผูกกับขนาด viewport การรู้ว่า 24px เท่ากับกี่ vw บนหน้าจอ 1440px ไม่ใช่เรื่องที่ควรนั่งเดา
• ปรับ base font size ได้ตามโปรเจกต์ — ไม่ใช่ทุกเว็บที่ใช้ 16px เป็นฐาน บางโปรเจกต์ตั้ง html font-size เป็น 62.5% หรือใช้ค่าอื่น เครื่องมือนี้ให้กำหนดค่าฐานได้อิสระ
• เห็นผลแบบ real-time — ผลลัพธ์อัปเดตอัตโนมัติทุกครั้งที่เปลี่ยนค่าหรือเปลี่ยนหน่วย ทำให้เปรียบเทียบค่าต่าง ๆ ได้รวดเร็ว
• คัดลอกผลลัพธ์ไปใช้ได้ทันที — มีปุ่ม copy ผลลัพธ์เพื่อนำไปวางในไฟล์ CSS ได้เลย ไม่ต้องพิมพ์ซ้ำให้เสียเวลา

ฟีเจอร์สำคัญ

รายละเอียดเพิ่มเติมที่ควรรู้:

• แปลงผ่าน pixel เป็นตัวกลาง — ทุกการแปลงจะคำนวณค่าออกเป็น pixel ก่อน แล้วจึงแปลงเป็นหน่วยปลายทาง วิธีนี้ทำให้การแปลงระหว่างหน่วยใด ๆ ก็ตามมีความสม่ำเสมอและแม่นยำ ไม่ว่าต้นทางจะเป็น rem ปลายทางเป็น vw หรือจาก pt เป็น %
• rem และ em ใช้ base size ที่ตั้งไว้ในเครื่องมือ — ค่า 1rem หรือ 1em จะเท่ากับ base font size ที่คุณกำหนด เช่น ตั้งไว้ 16px ก็จะได้ 16px = 1rem = 1em
• vw และ vh ใช้ขนาด viewport ที่กำหนด — เครื่องมือใช้ค่า viewport width และ height ที่คุณตั้งไว้เป็นตัวแทนขนาดหน้าจอ ทำให้แปลง px เป็น vw/vh ได้ตรงกับอุปกรณ์เป้าหมาย

วิธีใช้งาน

1. ใส่ค่าที่ต้องการแปลง — พิมพ์ตัวเลขลงในช่องค่า แล้วเลือกหน่วยต้นทาง เช่น 16 px
2. เลือกหน่วยปลายทาง — เลือกหน่วยที่ต้องการแปลงไป เช่น rem ผลลัพธ์จะปรากฏทันทีโดยไม่ต้องกดปุ่มใด ๆ
3. ตั้งค่า base font size และ viewport — หากแปลง rem, em หรือ % ให้ตรวจสอบว่า base font size ถูกต้อง (ค่าเริ่มต้นคือ 16px) และหากแปลง vw หรือ vh ให้กำหนด viewport width และ height ให้ตรงกับขนาดหน้าจอที่ต้องการจำลอง
4. ตรวจสอบและปรับค่า — ผลลัพธ์อัปเดตแบบ auto-update ลองเปลี่ยนค่าหรือสลับหน่วยด้วยปุ่ม swap เพื่อย้อนกลับ เช่น ดูว่า 1 rem เท่ากับกี่ px
5. คัดลอกผลลัพธ์ไปใช้ — กดปุ่ม copy result แล้วนำไปวางในไฟล์ CSS หรือดีไซน์ของคุณได้เลย

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

เพื่อให้ใช้เครื่องมือได้อย่างมั่นใจ มาดูกันว่าแต่ละหน่วยหมายถึงอะไร และเครื่องมือนี้คำนวณอย่างไร

px (pixel)

px คือหน่วยพื้นฐานที่สุด มีค่าคงที่ไม่ขึ้นกับอะไรทั้งนั้น เป็นหน่วยที่เครื่องมืออื่น ๆ ทั้งหมดถูกอ้างอิงเข้าหา ในการแปลงของเครื่องมือนี้ ทุกหน่วยจะถูกแปลงเป็น px ก่อนเสมอ แล้วจึงแปลงต่อไปยังหน่วยปลายทาง

rem (root em)

rem คือหน่วยที่อ้างอิงกับ font size ของ root element (แท็ก <html>) ในเครื่องมือนี้ rem ใช้ base font size ที่คุณตั้งค่าไว้ เป็นตัวหาร/คูณ ตัวอย่างเช่น ถ้า base คือ 16px:

• 16px = 1rem
• 24px = 1.5rem
• 12px = 0.75rem

/* ตัวอย่างเมื่อ base font size = 16px */
html {
  font-size: 16px;
}

h1 {
  font-size: 1.5rem; /* = 24px */
}

small {
  font-size: 0.75rem; /* = 12px */
}

em

em คือหน่วยที่อ้างอิงกับ font size ของ element แม่ (parent) ในทางปฏิบัติเครื่องมือนี้ใช้สมมติฐานเดียวกับ rem คือ em ใช้ base size ที่ตั้งไว้ในเครื่องมือ เป็นฐานคำนวณ เหมาะกับการประมาณค่าอย่างรวดเร็วในกรณีที่ parent มี font size เท่ากับค่าฐานพอดี

% (percent)

สำหรับหน่วยเปอร์เซ็นต์ เครื่องมือคำนวณจาก base size เช่นกัน โดย 100% จะมีค่าเท่ากับ base font size ที่ตั้งไว้ ตัวอย่างเช่น base 16px จะได้ 100% = 16px, 150% = 24px

vw และ vh (viewport units)

vw คือ 1% ของความกว้าง viewport ส่วน vh คือ 1% ของความสูง viewport เครื่องมือใช้ viewport width และ height ที่คุณกำหนด ในการคำนวณ ตัวอย่างเช่น viewport width 1440px:

• 1vw = 14.4px
• 10vw = 144px

/* ตัวอย่างเมื่อ viewport width = 1440px, height = 900px */
.hero {
  width: 100vw; /* = 1440px */
  height: 100vh; /* = 900px */
}

.banner {
  font-size: 3vw; /* = 43.2px */
}

pt (point)

pt เป็นหน่วยที่นิยมในงานพิมพ์ โดยเครื่องมือใช้ค่าคงที่ 1pt = 1.333333px (มาจากมาตรฐาน 96dpi ที่ 1 นิ้ว = 96px และ 1 นิ้ว = 72pt) ดังนั้น 12pt จึงเท่ากับประมาณ 16px พอดี

Use Cases ที่ใช้ได้จริง

แปลงดีไซน์จาก Figma เป็นโค้ด CSS

ดีไซเนอร์มักทำงานในหน่วย px แต่ฝ่ายพัฒนาอาจต้องการใช้ rem เพื่อให้เว็บปรับขนาดตามการตั้งค่า accessibility ของผู้ใช้ได้ เช่น ดีไซน์กำหนดตัวอักษร heading ไว้ 28px เมื่อ base 16px จะแปลงได้ 1.75rem นำไปใส่ในโค้ดได้ทันที

h2 {
  font-size: 1.75rem; /* มาจาก 28px ที่ base 16px */
}

ออกแบบ typography แบบ responsive

การใช้ rem ร่วมกับฟังก์ชัน clamp() ช่วยให้ตัวอักษรย่อขยายตามหน้าจอได้อย่างนุ่มนวล คุณสามารถใช้เครื่องมือหาค่าต่ำสุดและสูงสุดเป็น rem ก่อน แล้วประกอบเป็น clamp ได้ เช่น ต้องการตัวอักษรระหว่าง 1rem ถึง 2rem:

h1 {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

สร้าง layout เต็มจอด้วย viewport units

หน้า landing page มักต้องการ hero section ที่กินพื้นที่เต็มจอ การรู้ว่า viewport 1920×1080px นั้น 80vh เท่ากับ 864px ช่วยให้คุณวางแผนระยะห่างและขนาดองค์ประกอบได้แม่นยำก่อนลงโค้ดจริง

.hero {
  min-height: 80vh; /* = 864px บนจอสูง 1080px */
}

เตรียมสไตล์สำหรับงานพิมพ์ (print stylesheet)

เอกสารที่ต้องพิมพ์มักใช้หน่วย pt เป็นหลัก เมื่อต้องแปลงค่าจากดีไซน์บนจอ (px) ไปเป็น pt สำหรับ @media print เครื่องมือนี้ช่วยแปลงได้ทันที เช่น 16px เท่ากับ 12pt พอดี

@media print {
  body {
    font-size: 12pt; /* ≈ 16px บนหน้าจอ */
  }
}

Best Practices

• ใช้ rem เป็นหลักสำหรับ font size — เพราะอ้างอิงกับ root ทำให้ผู้ใช้ที่ปรับขนาดตัวอักษรในเบราว์เซอร์ (เพื่อ accessibility) ยังเห็นสัดส่วนเดิม และง่ายต่อการ scale ทั้งเว็บจากการแก้ค่าเดียว
• ใช้ em สำหรับองค์ประกอบที่ควรขยายตามข้อความ — เช่น padding หรือ margin ของปุ่มและ badge ที่อยากให้ขยายตาม font size ของปุ่มนั้น ๆ
• ใช้ px กับรายละเอียดเล็ก ๆ ที่ต้องการค่าคงที่ — เช่น border, เงา หรือระยะห่างเล็ก ๆ ที่ไม่ควรเปลี่ยนตามการซูมตัวอักษร
• ระวังการใช้ vh บนมือถือ — address bar ของเบราว์เซอร์มือถืออาจทำให้ความสูงหน้าจอจริงไม่เท่ากับ 100vh ควรทดสอบบนอุปกรณ์จริงหรือพิจารณาใช้ dvh/svh ร่วมด้วย
• กำหนด base font size ให้ชัดทั้งทีม — ตกลงค่าฐาน (เช่น 16px) ให้ตรงกันทั้งทีมดีไซน์และทีมพัฒนา เพื่อให้การแปลงค่าและการสื่อสารไม่คลาดเคลื่อน
• ทดสอบบนหลายขนาดหน้าจอ — ค่าที่แปลงได้เป็นเพียงจุดเริ่มต้น ควรตรวจสอบผลลัพธ์จริงบนหน้าจอ desktop, tablet และ mobile เสมอ

พร้อมลองใช้ CSS Unit Converter แล้วหรือยัง?

การแปลงหน่วย CSS ไม่จำเป็นต้องเป็นเรื่องน่าปวดหัวอีกต่อไป เพียงเข้าไปที่ CSS Unit Converter คุณก็สามารถแปลงค่าระหว่าง px, rem, em, %, vw, vh และ pt ได้ทันที ฟรี ไม่ต้องสมัครสมาชิก รองรับทั้งการกำหนด base font size และขนาด viewport ตามอุปกรณ์ของคุณ ลองใช้เครื่องมือนี้ในงานถัดไป แล้วคุณจะพบว่าการคำนวณหน่วย CSS รวดเร็วและแม่นยำขึ้นกว่าเดิมมาก

Related Tools You Might Like:

• Color Converter
• CSS to Tailwind Converter
• Data Storage Converter

ขอให้สนุกกับการออกแบบ!