ข้ามไปที่เนื้อหา
โลโก้ CrateX.app

CrateX.app

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

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

ตัวแปลงหน่วย CSS ช่วยแปลง px, rem, em, %, vw, vh และ pt พร้อมตั้งค่า font root, parent, viewport และ DPI สำหรับงาน responsive

พิกเซล
px
แตะที่ลูกศรเพื่อสลับหน่วย

หน่วยความยาว

ตัวอักษร/การจัดวาง

หน่วย viewport

เปอร์เซ็นต์

สัมพัทธ์กับขนาดฟอนต์ของราก
rem
แตะที่ลูกศรเพื่อสลับหน่วย

หน่วยความยาว

ตัวอักษร/การจัดวาง

หน่วย viewport

เปอร์เซ็นต์
ตัวแปลงหน่วย CSS

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

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

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

กรณีใช้งาน

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

สถานการณ์เสริม

ตัวแปลง em, หน่วย viewport และ เครื่องคำนวณ CSS ก็จัดการในขั้นตอนเดียวกันได้ ช่วยตรวจผลลัพธ์ให้เร็วขึ้นก่อนคัดลอกหรือส่งออก

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

กำหนดฐาน: 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 ควรมีการตรวจสอบจริง

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

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

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

4

ขั้นตอนถัดไปสามารถทำต่อด้วยเครื่องมือที่เกี่ยวข้องเหล่านี้