ตัวแปลงหน่วย CSS คืออะไร?
CSS รองรับหน่วยการวัดขนาดหลายแบบ — หน่วยสัมบูรณ์เช่น px และ pt และหน่วยสัมพัทธ์เช่น rem, em, vw, vh และ % หน่วยสัมพัทธ์มีความสำคัญต่อการออกแบบที่ปรับตัวได้และเข้าถึงง่าย (โดยเฉพาะ rem ที่เคารพการตั้งค่าขนาดฟอนต์ของเบราว์เซอร์ผู้ใช้) แต่การแปลงระหว่างหน่วยเหล่านี้ในใจนั้นยากจริงๆ เพราะผลลัพธ์ขึ้นอยู่กับบริบท: ขนาดฟอนต์ราก ขนาดฟอนต์ของอิลิเมนต์ปัจจุบัน หรือขนาด viewport
ตัวแปลงนี้คำนวณให้คุณ: ตั้งค่าขนาดฟอนต์ฐาน ขนาด viewport และค่าที่คุณกำลังแปลง แล้วดูค่าที่เทียบเท่ากันในทุกหน่วยอื่นได้ทันที — มีประโยชน์สำหรับการแปลงค่าพิกเซลจากมอกอัปดีไซน์เป็นค่า rem/vw ที่ปรับตัวได้ หรือตรวจสอบว่ากฎ CSS ที่มีอยู่แสดงผลบนหน้าจอเป็นอย่างไรจริงๆ
เมื่อไหร่ควรใช้เครื่องคำนวณนี้
- เมื่อคุณต้องประเมินค่าใช้จ่ายของเครื่องมือก่อนเริ่มโครงการ
- เมื่อเปรียบเทียบผลลัพธ์กับเครื่องมืออื่นๆ ที่คล้ายกัน
- เมื่อเรียนรู้วิธีใช้เครื่องมือในสถานการณ์ต่างๆ
- เมื่อแชร์ผลลัพธ์กับทีมหรือลูกค้า
- เมื่อตรวจสอบความถูกต้องของการคำนวณของเครื่องมือ
- เมื่อค้นหาวิธีแก้ปัญหาเฉพาะอย่างรวดเร็วและง่ายดาย
ขั้นตอน:
- ป้อนค่าที่คุณต้องการแปลงและเลือกหน่วยต้นทาง
- ตั้งค่าขนาดฟอนต์ฐานของคุณ (ค่าเริ่มต้นตามมาตรฐานเบราว์เซอร์ที่ 16px)
- สำหรับการแปลง vw/vh ให้ป้อนความกว้างและความสูง viewport เป้าหมาย
- อ่านค่าที่เทียบเท่ากันในทุกหน่วยอื่นได้ทันที
สูตร
1rem = 1em = ขนาดฟอนต์ฐาน (ค่าเริ่มต้น 16px)
1pt = 96/72 px ≈ 1.333px
1vw = ความกว้าง viewport / 100
1vh = ความสูง viewport / 100
1% = ค่าอ้างอิง / 100
กรณีใช้งาน
- แปลงสเปกพิกเซลจาก Figma/Sketch ของดีไซเนอร์เป็นค่า rem สำหรับ CSS ที่เข้าถึงง่าย
- ตรวจสอบว่าขนาดฟอนต์ที่ปรับตัวได้ตาม vw แสดงผลจริงเป็นเท่าไรที่ความกว้างหน้าจอหนึ่งๆ
- แปลง CSS แบบเก่าที่ใช้ pt สำหรับงานพิมพ์หรืออีเมลเป็น px หรือ rem มาตรฐานเว็บ
- ตรวจสอบว่าสเกลระยะห่างของดีไซน์ซิสเต็มสอดคล้องกันระหว่างหน่วยหรือไม่
- ตรวจสอบค่า CSS อย่างรวดเร็วระหว่างรีวิวโค้ดโดยไม่ต้องเปิดเครื่องมือนักพัฒนา
ประโยชน์หลัก
- แปลงระหว่างหน่วย CSS ทั่วไปทั้ง 7 หน่วยในที่เดียว
- ใช้ขนาดฟอนต์ฐานและ viewport จริงของคุณ ไม่ใช่ค่าสมมติที่ตายตัว
- ผลลัพธ์ทันทีขณะที่คุณพิมพ์ — ไม่ต้องเปิดเครื่องมือนักพัฒนาของเบราว์เซอร์
- ใช้งานฟรี ไม่ต้องสมัครสมาชิก ทำงานทั้งหมดในเบราว์เซอร์ของคุณ
เคล็ดลับ
- เลือกใช้ rem แทน em สำหรับขนาดฟอนต์เพื่อหลีกเลี่ยงการทบต้นที่ไม่คาดคิดในคอมโพเนนต์ที่ซ้อนกัน
- ใช้ dvh/svh แทน vh สำหรับเลย์เอาต์เต็มจอบนมือถือ หากเบราว์เซอร์เป้าหมายของคุณรองรับ
- รักษาขนาดฟอนต์ฐานให้สอดคล้องกันทั่วทั้งดีไซน์ซิสเต็มเพื่อให้การแปลง rem คาดเดาได้
- เมื่อแปลงดีไซน์ที่ต้องแม่นยำระดับพิกเซล ให้แปลงระยะห่างเป็น rem แต่คงความกว้างของขอบและรายละเอียดปลีกย่อยอื่นๆ ไว้เป็น px
ข้อผิดพลาดที่พบบ่อย
- สันนิษฐานว่า 1rem เท่ากับ 16px เสมอ โดยไม่ตรวจสอบว่าขนาดฟอนต์รากถูกเปลี่ยนหรือไม่
- ใช้ vh สำหรับเลย์เอาต์เต็มจอบนมือถือโดยไม่คำนึงถึงพฤติกรรมแถบที่อยู่ของเบราว์เซอร์
- ซ้อนขนาดฟอนต์ที่ใช้ em และแปลกใจเมื่อมันทบต้นโดยไม่คาดคิด
- ผสม px และ rem อย่างไม่สอดคล้องกันภายในคอมโพเนนต์เดียวกัน ทำลายการปรับขนาดเพื่อการเข้าถึง
คำศัพท์สำคัญ
- ขนาดฟอนต์ราก: font-size ที่กำหนดบนอิลิเมนต์ html ซึ่งหน่วย rem ทั้งหมดอ้างอิงตาม
- Viewport: พื้นที่ที่มองเห็นได้ของหน้าเว็บในหน้าต่างเบราว์เซอร์
- หน่วยสัมบูรณ์ (Absolute unit): หน่วยเช่น px หรือ pt ที่มีขนาดจริงคงที่ ไม่ขึ้นกับบริบทใดๆ
- หน่วยสัมพัทธ์ (Relative unit): หน่วยเช่น rem, em, vw หรือ % ที่ขนาดขึ้นอยู่กับค่าอื่น
แนวคิดที่เกี่ยวข้อง
- ตัวแปลงสี: แปลงระหว่างรูปแบบสี HEX, RGB และ HSL
- ตัวแปลงความยาว: แปลงระหว่างนิ้ว เซนติเมตร พิกเซล และอื่นๆ
- ตัวแปลงหน่วย: แปลงระหว่างหน่วยการวัดต่างๆ
- เครื่องคำนวณอัตราส่วนภาพ: คำนวณและแปลงอัตราส่วนภาพ
- ตัวแปลงข้อมูล: แปลงระหว่างไบต์ KB MB GB และ TB
ตัวอย่าง
ที่ขนาดฟอนต์ฐาน 16px, 1.5rem แปลงเป็น 24px ที่ความกว้าง viewport 1440px, 5vw แปลงเป็น 72px
การตีความผลลัพธ์
เครื่องมือนี้แสดงผลลัพธ์โดยละเอียดตามข้อมูลที่คุณป้อน โปรดตรวจสอบแต่ละส่วนอย่างละเอียดเพื่อทำความเข้าใจวิธีตีความตัวเลขและนำไปใช้ตัดสินใจ
หากคุณมีคำถามเกี่ยวกับวิธีการทำงานของเครื่องมือ หรือวิธีตีความผลลัพธ์บางอย่าง โปรดดูที่ส่วนคำถามที่พบบ่อยด้านล่าง หรือติดต่อฝ่ายสนับสนุน