Pixel to REM Converter: คู่มือเรียนรู้ CSS Unit เพื่อ Responsive Design

ถ้าเคยดูแล stylesheet ที่ทุกค่า font size, spacing และ breakpoint ถูก hardcode เป็น pixel คุณคงรู้ดีว่ามันเจ็บปวดแค่ไหน — แค่ design เปลี่ยนเล็กน้อยก็อาจต้องแก้หลักร้อยบรรทัด ทางออกที่ CSS style guide สมัยใหม่แนะนำคือการเปลี่ยนมาใช้ rem ซึ่งเป็นหน่วยที่ scale ตาม root font-size ของหน้าเว็บ และ Pixel to REM Converter ฟรีของเราทำให้การเปลี่ยนผ่านนี้ง่ายขึ้นมาก — แปลงค่า pixel เป็น rem ได้ทันที พร้อม root font-size ที่ปรับได้ ตาราง conversion ครบเซ็ต และค่า Tailwind breakpoints ในตัว

สูตรการแปลงนั้นเรียบง่าย — rem = px ÷ root font-size — แต่การนั่งคำนวณในใจสำหรับค่าเป็นสิบ ๆ ค่านั้นผิดพลาดได้ง่าย ความจริงคือ designer ยังส่ง spec เป็น pixel (Figma ก็ default เป็น px) framework อย่าง Tailwind กำหนด scale เป็น rem และ browser ก็ default root size ที่ 16px — เครื่องมือแปลง px to rem จึงเป็นหนึ่งใน small tool ที่คุณจะเปิดค้างไว้ทั้งวำัน

ในคู่มือนี้ คุณจะได้เรียนรู้ว่า converter ทำงานอย่างไร ทำไม่ rem ถึงสำคัญกับ accessibility และ responsive typography และจะใช้มันในสถานการณ์จริงอย่างไร — ตั้งแต่ migrate stylesheet เก่าไปจนถึงการ tune Tailwind breakpoints

ทำไม่ต้องใช้ Pixel to REM Converter?

• แปลงได้ทันที แม่นยำ 100%: พิมพ์ค่า pixel แล้วรับผลลัพธ์เป็น rem ทันที ไม่ต้องคำนวณเอง ไม่ต้องเปิดสูตรใน spreadsheet — เครื่องมือรองรับทศนิยมถึง 6 ตำแหน่ง ค่ายาก ๆ อย่าง 13px ก็แปลงได้สะอาด
• Root font-size ปรับได้: Browser ส่วนใหญ่ default ที่ 16px แต่หลาย design system ใช้ 10px (trick คลาสสิก 62.5%) หรือ base อื่น — converter ให้แก้ root font-size ได้และคำนวณใหม่ทั้งหมดทันที
• ตาราง conversion ครบเซ็ต: แทันที่จะแปลงทีละค่า คุณได้ reference table ของ pixel values ยอดนิยมตั้งแต่ 1px ถึง 128px — เปิดค้างไว้เป็น cheat sheet ตอนเขียนโค้ดได้เลย
• Tailwind breakpoint reference ในตัว: เครื่องมือแสดง breakpoints มาตรฐานของ Tailwind (sm, md, lg, xl, 2xl) ทั้งแบบ pixel และ rem — เลิกท่องจำว่า lg คือ 1024px หรือ 64rem กันเถอะ
• Copy-ready CSS: ผลลัพธ์ถูก format เป็น CSS ที่ถูกต้อง ก๊อปปิ้งไปวางใน stylesheet ได้ทันที ไม่ต้องเก็บอะไรเพิ่ม
• 100% client-side และฟรี: ทุกอย่างรันในเบราว์เซอร์ของคุณ ไม่ต้องสมัครสมาชิก ไม่มี server round-trip และค่าที่คุณกรอกไม่เคยออกจากเครื่อง

ฟีเจอร์เด่น

มี 2 รายละเอียดที่ทำให้ใช้งานประจำวันเร็วขึ้น อย่างแรกคือแถว quick-pick ครอบคลุม pixel values ที่อยู่ใน type scale แทบทุกชุด — conversion ที่ถี่ที่สุดจึงกลายเป็นแค่คลิกเดียว อย่างที่สองคือ root font-size เป็น input ที่แก้ได้ตรง ๆ ไม่ใช่ assumption ที่ซ่อนอยู่ — เครื่องมือเดียวกันจึงใช้ได้ทั้งโปรเจกต์ standard 16px และ design system แบบ 62.5% โดยไม่ต้องไปไล่แก้ settings

วิธีใช้งาน

1. เปิด Pixel to REM Converter
2. กรอกค่า pixel ที่ต้องการแปลง — หรือคลิก quick-pick buttons สำหรับขนาดยอดนิยม
3. ถ้าโปรเจกต์ใช้ root font-size แบบพิเศษ ให้แก้ base value (default 16px ตรงกับ browser เกือบทั้งหมด)
4. อ่านผลลัพธ์ rem ได้ทันที — ทิศทางย้อนกลับ rem → px ใช้วิธีเดียวกัน
5. ก๊อปปิ้งผลลัพธ์ CSS ไปวางใน stylesheet ของคุณ

เจาะลึกการทำงานของ REM

หน่วยหลัก ๆ ที่ใช้กำหนดขนาดใน CSS มี 3 แบบ และพฤติกรรมต่างกันมาก:

• px เป็น absolute — 16px คือ 16px ไม่ว่า context จะเป็นอย่างไร (ยกเว้น browser zoom)
• em สัมพัทธ์กับ font-size ของ parent element จึงเกิดการ compounding — element ที่ซ้อนกันและใช้ 1.2em จะคูณสะสมกันแบบคาดเดายาก นี่คือเหตุผลที่ layout แบบ em คิดยาก
• rem (root em) สัมพัทธ์กับ font-size ของ root <html> element — ค่าเดียว อ้างอิงจุดเดียว ไม่มีการ compounding

สูตรการแปลงก็แค่:

rem = px ÷ root font-size

เมื่อใช้ default ของ browser ที่ 16px:

html {
  font-size: 16px;
} /* default ของ browser */
body {
  font-size: 1rem;
} /* 16px */
h1 {
  font-size: 2rem;
} /* 32px */

ทำไม่ต้องเป็น 16px? เพราะเป็น default root font-size ของ browser หลัก ๆ ทุกตัว เลือกมาให้อ่านสบายตา และเมื่อ user เปลี่ยนขนาดตัวอักษรที่ต้องการใน browser settings (การปรับที่พบบ่อยมากในเชิง accessibility) root font-size ก็เปลี่ยนตาม — และทุกค่าที่เป็น rem บนเว็บคุณก็ scale ตามไปด้วย ส่วนค่าที่เป็น pixel จะไม่สนใจ preference นั้นเลย ซึ่งเป็นเหตุผลที่หนักที่สุดข้อหนึ่งที่ควรใช้ rem

มีกับดัก 2 อย่างที่ควรรู้ตั้งแต่เริ่มต้น อย่างแรกคือ trick 62.5% ยอดนิยม (html { font-size: 62.5%; }) ที่ทำให้ root เป็น 10px เพื่อให้ 1rem = 10px แล้วคำนวณง่าย — แต่มันก็หด rem values ของ user ที่เพิ่ม browser font-size ด้วย ซึ่งลดประโยชน์ด้าน accessibility ไปบางส่วน อย่างที่สองคือการ scale root font-size ทั้งหน้าเพื่อให้ component เดียวใหญ่ขึ้น จะกระเพื่อมไปถึงทุก rem value บนหน้านั้น — ถ้าจะเปลี่ยน root แบบหนัก ๆ ให้ scope ให้ระวัง หรือใช้ container queries สำหรับ scaling ระดับ component

Use Cases ในทางปฏิบัติ

Migrate stylesheet เก่า

สมมติว่า stylesheet เก่าเต็มไปด้วย pixel values และทีมเพิ่งตกลง convention ใหม่เป็น rem — กรอกแต่ละค่าใน converter (หรืออ่านจากตาราง conversion) แล้วแทันที่:

/* ก่อน */
.card {
  padding: 24px;
  font-size: 15px;
  border-radius: 8px;
}

/* หลัง */
.card {
  padding: 1.5rem;
  font-size: 0.9375rem;
  border-radius: 0.5rem;
}

สร้าง fluid type scale

Type scale แบบ rem ทำให้สัดส่วนคงที่ในขณะที่ยังเคารพ preference ของ user:

.text-sm {
  font-size: 0.875rem;
} /* 14px */
.text-base {
  font-size: 1rem;
} /* 16px */
.text-lg {
  font-size: 1.125rem;
} /* 18px */
.text-xl {
  font-size: 1.25rem;
} /* 20px */
.text-2xl {
  font-size: 1.5rem;
} /* 24px */

ตารางใน converter ให้ทุก step โดยไม่ต้องนั่งคำนวณ `24 ÷ 16 ใหม่ทุกครั้ง

ทำงานกับ Tailwind breakpoints

Tailwind กำหนด breakpoints เป็น rem: sm 40rem, md 48rem, lg 64rem, xl 80rem, 2xl 96rem เมื่อ design mockup บอกว่า "sidebar พับต่ำกว่า 1024px" converter ยืนยันให้ทันทีว่านั่นคือ lg — ไม่ต้องไปเปิดตาราง breakpoint ให้เสียเวลา และมีประโยชน์มากตอน customize screens ใน tailwind.config.js หรือ debug media queries ที่ไม่ยอมทำงานตรงจุดที่คาดไว้

Review pull request

การอ่านค่า rem ในโค้ดคนอื่นช้ากว่าอ่าน pixel มาก — ก๊อปปิ้ง 1.375rem ไปวางในโหมดย้อนกลับ รู้ทันทีว่าคือ 22px ใน one step ใช้ได้ทั้งตอน review และตอนแปล feedback จาก designer ("heading ตัวนี้น่าจะราว ๆ 22 พิกเซล")

Best Practices

• ใช้ rem กับ typography และ spacing ใช้ px กับ border และรายละเอียดเล็ก — hairline และ box-shadow มักไม่ควร scale ตาม font preference ของ user แต่ text และ layout rhythm ควร scale
• อย่าจำ hardcode ว่า 16 คือ root size "ของจริง" — เช็ค html font-size ของโปรเจกต์ก่อนเสมอ เพราะ base 62.5% เปลี่ยนทุก conversion แบบเงียบ ๆ
• เปิดตาราง conversion ค้างไว้ตอนเขียน CSS — pattern-matching กับตารางเร็วกว่าไปกดเครื่องคิดเลข แถมช่วยให้จำ ratio ยอดนิยมได้เองด้วย
• เคารพ preference ของ user — เลี่ยงการตั้ง root font-size เป็น px ให้ใช้ % หรือปล่อย default เพื่อให้ font scaling ระดับ browser ยังทำงาน
• เลือก rem มากกว่า em สำหรับค่าที่ใช้ร่วมกันหลาย component — การ compounding ของ em ทำให้ override ใน element ที่ซ้อนกันออกมาน่าแปลกใจ ส่วน rem อ้างอิงจุดเดียวทำให้ค่าคาดเดาได้
• แปลง design spec อย่าเพิ่งเปลี่ยน design — เมื่อ spec จาก Figma บอก 18px ให้แปลงตรง ๆ อย่า round เป็น rem "ที่ดูสวยกว่า" เพราะความสอดคล้องกับ design system สำคัญกว่าความสวยของตัวเลข

เริ่มแปลงวันนี้

ช่องว่างระหว่าง design tool ที่ใช้ pixel กับ CSS ที่ใช้ rem จะไม่หายไปไหน — แต่การข้ามมันใช้เวลาแค่ไม่กี่วินาทีถ้ามีเครื่องมือถูกต้อง เปิด Pixel to REM Converter แล้วทำให้ stylesheet ชุดถัดไปของคุณเป็นชุดที่เคารพ font preference ของ user ตั้งแต่บรรทัดแรก

เครื่องมือที่เกี่ยวข้อง

• Color Converter
• CSS Grid Generator
• Hex to RGB Converter

ขอให้สนุกกับการแปลงค่า!