การแปลงหน่วย CSS คือกระบวนการแปลงระหว่างหน่วยความยาวต่างๆ (px, em, rem, %, vw, vh ฯลฯ) ที่ใช้ในการออกแบบเว็บ
หน่วยสัมบูรณ์และสัมพัทธ์
หน่วย CSS แบ่งเป็นหน่วยสัมบูรณ์และสัมพัทธ์โดยกว้างๆ หน่วยสัมบูรณ์ (px, pt, cm ฯลฯ) มีขนาดคงที่ ในขณะที่หน่วยสัมพัทธ์ (em, rem, %, vw, vh ฯลฯ) แสดงเป็นอัตราส่วนต่อค่าฐาน
px (พิกเซล)
หน่วยที่ใช้กันทั่วไปที่สุด แทนหนึ่งจุดบนหน้าจอ ง่ายต่อการจัดการด้วยขนาดคงที่ แต่มีความท้าทายด้านการเข้าถึงเนื่องจากละเว้นการตั้งค่าขนาดฟอนต์ของผู้ใช้
em (Em)
หน่วยสัมพัทธ์อิงตามขนาดฟอนต์ขององค์ประกอบพาเรนต์ 1em = font-size ของพาเรนต์ คำนวณแบบทบต้นในโครงสร้างซ้อน ซึ่งอาจนำไปสู่ขนาดที่ไม่คาดคิดในลำดับชั้นที่ลึก
rem (Root Em)
หน่วยสัมพัทธ์อิงตามขนาดฟอนต์ขององค์ประกอบรูท (html) 1rem = font-size ของ html (โดยปกติ 16px) ต่างจาก em ไม่ได้รับผลกระทบจากการซ้อน แนะนำใน CSS สมัยใหม่
% (เปอร์เซ็นต์)
แทนสัดส่วนต่อขนาดขององค์ประกอบพาเรนต์ สำหรับ font-size อิงตาม font-size ของพาเรนต์ สำหรับ width อิงตาม width ของพาเรนต์ โปรดทราบว่าฐานแตกต่างกันตามคุณสมบัติ
vw/vh (หน่วยวิวพอร์ต)
หน่วยอิงตามขนาดวิวพอร์ต (พื้นที่แสดงผล) 1vw = 1% ของความกว้างวิวพอร์ต 1vh = 1% ของความสูงวิวพอร์ต เปิดใช้งานเลย์เอาต์ที่ยืดหยุ่นตอบสนองต่อขนาดหน้าจอ
pt/pc (หน่วยพิมพ์)
หน่วยที่ใช้ในอุตสาหกรรมการพิมพ์ 1pt = 1/72 นิ้ว 1pc = 12pt ใช้ใน CSS การพิมพ์และการสร้าง PDF แต่ px หรือ rem โดยทั่วไปใช้สำหรับการแสดงผลบนหน้าจอ
หน่วยทางกายภาพ (cm/mm/in)
หน่วยแทนความยาวทางกายภาพจริง 1in = 2.54cm = 25.4mm = 96px (คำนิยาม CSS) ใช้เมื่อต้องการความสอดคล้องกับเอกสารที่พิมพ์ แต่ขนาดหน้าจอทางกายภาพไม่ได้รับการรับประกัน
ข้อดีของการแปลงแบบเรียลไทม์
เครื่องมือนี้รองรับการแปลงแบบเรียลไทม์ อัปเดตผลลัพธ์ทันทีเมื่อค่าฐานเปลี่ยน ช่วยให้ออกแบบ CSS ได้อย่างมีประสิทธิภาพโดยการตรวจสอบลักษณะที่ปรากฏด้วยขนาดหน้าจอและการตั้งค่าฟอนต์ต่างๆ ได้อย่างรวดเร็ว