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

แปลงระหว่าง px, rem, em, pt, vw, vh และ % ได้ทันที โดยใช้ขนาดฟอนต์ฐานและขนาด viewport ของคุณเอง — ไม่ต้องเดาอีกต่อไปว่า 1.5rem มีค่าเท่าไรในหน่วยพิกเซล

ตัวแปลงหน่วย CSS คืออะไร?

CSS รองรับหน่วยการวัดขนาดหลายแบบ — หน่วยสัมบูรณ์เช่น px และ pt และหน่วยสัมพัทธ์เช่น rem, em, vw, vh และ % หน่วยสัมพัทธ์มีความสำคัญต่อการออกแบบที่ปรับตัวได้และเข้าถึงง่าย (โดยเฉพาะ rem ที่เคารพการตั้งค่าขนาดฟอนต์ของเบราว์เซอร์ผู้ใช้) แต่การแปลงระหว่างหน่วยเหล่านี้ในใจนั้นยากจริงๆ เพราะผลลัพธ์ขึ้นอยู่กับบริบท: ขนาดฟอนต์ราก ขนาดฟอนต์ของอิลิเมนต์ปัจจุบัน หรือขนาด viewport

ตัวแปลงนี้คำนวณให้คุณ: ตั้งค่าขนาดฟอนต์ฐาน ขนาด viewport และค่าที่คุณกำลังแปลง แล้วดูค่าที่เทียบเท่ากันในทุกหน่วยอื่นได้ทันที — มีประโยชน์สำหรับการแปลงค่าพิกเซลจากมอกอัปดีไซน์เป็นค่า rem/vw ที่ปรับตัวได้ หรือตรวจสอบว่ากฎ CSS ที่มีอยู่แสดงผลบนหน้าจอเป็นอย่างไรจริงๆ

สูตร

1rem = 1em = ขนาดฟอนต์ฐาน (ค่าเริ่มต้น 16px)

1pt = 96/72 px ≈ 1.333px

1vw = ความกว้าง viewport / 100

1vh = ความสูง viewport / 100

1% = ค่าอ้างอิง / 100

วิธีคำนวณ

ป้อนค่าที่คุณต้องการแปลงและเลือกหน่วยต้นทาง
ตั้งค่าขนาดฟอนต์ฐานของคุณ (ค่าเริ่มต้นตามมาตรฐานเบราว์เซอร์ที่ 16px)
สำหรับการแปลง vw/vh ให้ป้อนความกว้างและความสูง viewport เป้าหมาย
อ่านค่าที่เทียบเท่ากันในทุกหน่วยอื่นได้ทันที

ตัวอย่าง

ที่ขนาดฟอนต์ฐาน 16px, 1.5rem แปลงเป็น 24px ที่ความกว้าง viewport 1440px, 5vw แปลงเป็น 72px

ประโยชน์หลัก

แปลงระหว่างหน่วย CSS ทั่วไปทั้ง 7 หน่วยในที่เดียว
ใช้ขนาดฟอนต์ฐานและ viewport จริงของคุณ ไม่ใช่ค่าสมมติที่ตายตัว
ผลลัพธ์ทันทีขณะที่คุณพิมพ์ — ไม่ต้องเปิดเครื่องมือนักพัฒนาของเบราว์เซอร์
ใช้งานฟรี ไม่ต้องสมัครสมาชิก ทำงานทั้งหมดในเบราว์เซอร์ของคุณ

ข้อผิดพลาดที่พบบ่อย

สันนิษฐานว่า 1rem เท่ากับ 16px เสมอ โดยไม่ตรวจสอบว่าขนาดฟอนต์รากถูกเปลี่ยนหรือไม่
ใช้ vh สำหรับเลย์เอาต์เต็มจอบนมือถือโดยไม่คำนึงถึงพฤติกรรมแถบที่อยู่ของเบราว์เซอร์
ซ้อนขนาดฟอนต์ที่ใช้ em และแปลกใจเมื่อมันทบต้นโดยไม่คาดคิด
ผสม px และ rem อย่างไม่สอดคล้องกันภายในคอมโพเนนต์เดียวกัน ทำลายการปรับขนาดเพื่อการเข้าถึง

เคล็ดลับ

เลือกใช้ rem แทน em สำหรับขนาดฟอนต์เพื่อหลีกเลี่ยงการทบต้นที่ไม่คาดคิดในคอมโพเนนต์ที่ซ้อนกัน
ใช้ dvh/svh แทน vh สำหรับเลย์เอาต์เต็มจอบนมือถือ หากเบราว์เซอร์เป้าหมายของคุณรองรับ
รักษาขนาดฟอนต์ฐานให้สอดคล้องกันทั่วทั้งดีไซน์ซิสเต็มเพื่อให้การแปลง rem คาดเดาได้
เมื่อแปลงดีไซน์ที่ต้องแม่นยำระดับพิกเซล ให้แปลงระยะห่างเป็น rem แต่คงความกว้างของขอบและรายละเอียดปลีกย่อยอื่นๆ ไว้เป็น px

คำศัพท์สำคัญ

ขนาดฟอนต์ราก (Root font size): font-size ที่ตั้งไว้บนอิลิเมนต์ html ซึ่งหน่วย rem ทั้งหมดอ้างอิงตาม
Viewport: พื้นที่ที่มองเห็นได้ของหน้าเว็บในหน้าต่างเบราว์เซอร์
หน่วยสัมบูรณ์ (Absolute unit): หน่วยเช่น px หรือ pt ที่มีขนาดจริงคงที่ ไม่ขึ้นกับบริบทใดๆ
หน่วยสัมพัทธ์ (Relative unit): หน่วยเช่น rem, em, vw หรือ % ที่ขนาดขึ้นอยู่กับค่าอื่น

กรณีใช้งานทั่วไป

แปลงสเปกพิกเซลจาก Figma/Sketch ของดีไซเนอร์เป็นค่า rem สำหรับ CSS ที่เข้าถึงง่าย
ตรวจสอบว่าขนาดฟอนต์ที่ปรับตัวได้ตาม vw แสดงผลจริงเป็นเท่าไรที่ความกว้างหน้าจอหนึ่งๆ
แปลง CSS แบบเก่าที่ใช้ pt สำหรับงานพิมพ์หรืออีเมลเป็น px หรือ rem มาตรฐานเว็บ
ตรวจสอบว่าสเกลระยะห่างของดีไซน์ซิสเต็มสอดคล้องกันระหว่างหน่วยหรือไม่
ตรวจสอบค่า CSS อย่างรวดเร็วระหว่างรีวิวโค้ดโดยไม่ต้องเปิดเครื่องมือนักพัฒนา

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

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

rem อ้างอิงกับขนาดฟอนต์ของอิลิเมนต์ราก (html) เสมอ จึงคงที่ไม่ว่าอิลิเมนต์จะซ้อนลึกแค่ไหน ส่วน em อ้างอิงกับขนาดฟอนต์ของอิลิเมนต์ปัจจุบันเอง ซึ่งหมายความว่าอาจทบต้นเมื่อซ้อนกัน — เครื่องมือนี้จัดการทั้งสองแบบเหมือนกันเพื่อความง่าย โดยใช้ขนาดฟอนต์ฐานของคุณ

ทำไม 1rem มักเท่ากับ 16px?

16px คือขนาดฟอนต์เริ่มต้นของเบราว์เซอร์สำหรับอิลิเมนต์ราก html แทบทุกเบราว์เซอร์ เนื่องจาก rem อ้างอิงกับขนาดรากนั้น 1rem จึงเท่ากับ 16px เว้นแต่หน้าเว็บ (หรือการตั้งค่าเบราว์เซอร์ของผู้ใช้) จะเปลี่ยนขนาดฟอนต์รากอย่างชัดเจน

vw กับ vh ใช้ทำอะไร?

vw (ความกว้างวิวพอร์ต) และ vh (ความสูงวิวพอร์ต) คือเปอร์เซ็นต์ของความกว้างและความสูงปัจจุบันของหน้าต่างเบราว์เซอร์ — 1vw เท่ากับ 1% ของความกว้าง viewport มักใช้สำหรับเลย์เอาต์เต็มจอและตัวอักษรที่ปรับขนาดตามหน้าจอ

พิกเซลเท่ากับ 1/96 นิ้วเสมอหรือไม่?

ตามข้อกำหนด CSS ใช่ — พิกเซล CSS ถูกกำหนดให้เท่ากับ 1/96 นิ้ว ซึ่งเป็นเหตุผลว่าทำไม 1pt (1/72 นิ้ว) จึงแปลงเป็น 96/72 = 1.333 พิกเซล CSS พอดี