ตัวแปลงหน่วย CSS

รองรับการแปลงระหว่างหน่วย CSS เช่น px, em, rem, %, vw, vh พร้อมการตั้งค่าจุดตัดแบบตอบสนอง คำนวณค่าที่ขึ้นกับบริบทโดยอัตโนมัติ เหมาะสำหรับการพัฒนาเลย์เอาต์แบบตอบสนอง การใช้งานส่วนหน้า และการปรับสไตล์

วิธีใช้งาน

🚀 เริ่มต้นอย่างรวดเร็ว

กรอกค่าและหน่วย: เช่น 16 + px หรือ 1 + rem
เลือกหน่วยต้นทาง กรอกค่า จากนั้นเลือกหน่วยปลายทาง และใช้ปุ่มสลับเพื่อสลับได้อย่างรวดเร็ว
บนมือถือ: ใช้ลูกศรมุมขวาบนในแผงเลื่อนเพื่อสลับระหว่างหน่วยต้นทาง/ปลายทาง
การตั้งค่าใช้ได้กับ rem/em/%/vw/vh และปิดใช้งานสำหรับหน่วยแบบตายตัว
ดูผลลัพธ์: หน่วยอื่นจะถูกคำนวณให้ทันทีและคัดลอกได้
ใช้ breakpoint: สลับพรีเซ็ต mobile/tablet/desktop เพื่อตรวจสอบผลการแปลงบนขนาดหน้าจอต่าง ๆ

📌 สถานการณ์การใช้งานทั่วไป

กรณีใช้งาน: สร้างเลย์เอาต์ responsive ส่งต่อดีไซน์ให้ dev จับคู่ค่าระหว่างหน้าจอกับงานพิมพ์ และกำหนดมาตรฐานการใช้หน่วยในโค้ด

🧭 คำแนะนำการใช้งาน

กำหนดฐาน: root 16px เป็นค่าแพร่หลาย ช่วยให้คิด rem ↔ px ในหัวได้ง่าย
ใช้ rem กับข้อความ: ช่วยให้ปรับ scale ทั้งระบบและรองรับ a11y ส่วน em เหมาะกับการ scale ภายในคอมโพเนนต์
ใช้หน่วย viewport กับเลย์เอาต์: ผสานกับ breakpoint และฟังก์ชัน clamp เพื่อหลีกเลี่ยงค่าที่สุดโต่ง
ทศนิยมและการปัดเศษ: เก็บทศนิยมในระดับที่อ่านง่ายเพื่อไม่ให้เลขรกเกินไป

🎛️ พารามิเตอร์และบริบท

ฐาน REM: กำหนดการแปลง rem ↔ px 16px เป็นค่าที่ใช้กันมากบนเว็บ ช่วยให้คิดในหัวง่าย หากดีไซน์ไม่ได้อิง 16px สามารถปรับชั่วคราวได้
ฐาน EM: กำหนด em และ % (เมื่ออ้างอิงคือขนาดฟอนต์) เหมาะสำหรับการ scale ภายในคอมโพเนนต์: เปลี่ยนขนาดฟอนต์ของ parent เพื่อ scale บล็อกนั้น
อ้างอิงของ %: เลือก Font size / Width / Height เป็นฐานอ้างอิง สำหรับเลย์เอาต์มักใช้อิงความกว้าง/ความสูง; สำหรับ typography ใช้อิงขนาดฟอนต์
พรีเซ็ต breakpoint: Mobile / Tablet / Desktop / Large จะตั้ง viewport ให้ด้วยเพื่อประเมินบนความกว้างต่าง ๆ จุดนี้ใช้เพื่อประเมินตอนออกแบบ ไม่ใช่ media query ที่รันจริงในเบราว์เซอร์
ขนาด viewport: ใช้ในการคำนวณ vw/vh/vmin/vmax และ % (เมื่ออ้างอิงคือความกว้าง/ความสูง) ค่าในอุปกรณ์จริงอาจต่างออกไปเพราะแถบที่อยู่ safe area และแถบเลื่อน
DPI: ใช้แปลงระหว่างหน่วยกายภาพ pt/pc/in/cm/mm/q กับ px ค่าเริ่มต้นบนเว็บมักถือว่าเป็น 96 DPI; สำหรับงานพิมพ์/จอ HiDPI ควรตั้งเป็นค่าอุปกรณ์จริง ถ้าไม่ทราบให้ถือเป็นค่าประมาณ
เคล็ดลับ: 1) 16px และ 96 DPI เป็นฐานที่ใช้บ่อย; 2) ตรวจสอบเปอร์เซ็นต์เลย์เอาต์โดยสลับ breakpoint; 3) การตั้งค่าเหล่านี้ช่วยประเมินตอนออกแบบ ไม่ได้แทนผลคำนวณสุดท้ายของ DOM/CSS ในเบราว์เซอร์

⚠️ ข้อจำกัดและความเข้ากันได้

การอ้างอิงของ % ขึ้นกับ property; เครื่องมือนี้ประเมินตามกรณีที่พบบ่อย
ex/ch พึ่งพา metrics ของฟอนต์ ผลลัพธ์จึงอาจต่างกันไปในแต่ละฟอนต์/เบราว์เซอร์
หน่วย viewport อาจต่างกันเล็กน้อยจากแถบเลื่อน แถบที่อยู่ และ safe area ของอุปกรณ์
การแปลงหน่วยกายภาพ ↔ px ขึ้นกับ DPI; อุปกรณ์พิมพ์/จอ HiDPI ควรมีการตรวจสอบจริง

🔒 ความเป็นส่วนตัวและความปลอดภัย

การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ข้อมูลจะไม่ออกจากอุปกรณ์

❓ คำถามที่พบบ่อย

rem กับ em ต่างกันอย่างไร?

rem อ้างอิงขนาดฟอนต์ของ root ส่วน em อ้างอิง parent

ควรใช้ px หรือ rem ดี?

โดยทั่วไปควรใช้ rem กับเลย์เอาต์และข้อความ; px ยังเหมาะกับไอคอนและเส้นขอบที่ต้องการความคมชัด

ทำไม vw/vh ถึงมีพฤติกรรมต่างกันในแต่ละอุปกรณ์?

เพราะแถบที่อยู่บนมือถือ safe area และแถบเลื่อนมีผลต่อ viewport; ควรใช้ร่วมกับ clamp()/min()/max() และ breakpoint

จะแปลงพิกเซลบนจอเป็นหน่วยสำหรับงานพิมพ์อย่างไร?

ตั้งค่า DPI (เช่น 96/72/300) การแปลงจากหน้าจอ → งานพิมพ์ที่นี่เป็นเพียงค่าประมาณ งานพิมพ์จริงควรใช้เวิร์กโฟลว์ที่มีโปรไฟล์ ICC และการปรู๊ฟ