ข้ามไปยังเครื่องมือ
JoeLucky

กด ★ ที่เครื่องมือเพื่อบันทึก

หมวดหมู่เครื่องมือ

แปลงโค้ดเป็นรูปภาพสร้างไล่สี CSSGlassmorphism CSSสร้าง Box Shadowสร้าง CSS Loaderสร้าง SVG BlobSVG เป็น PNGตรวจความต่างสีแปลง PX / REM / EM
JoeLucky

เครื่องมือออนไลน์ที่ใช้งานได้จริง รวมไว้ในที่เดียว

นโยบายความเป็นส่วนตัวข้อกำหนดการให้บริการ

© 2026 JoeLucky®. สงวนลิขสิทธิ์

  1. JoeLucky
  2. /CSS และการออกแบบ
  3. /แปลง PX / REM / EM

แปลง PX / REM / EM

แปลงระหว่าง px, rem และ em ด้วยขนาดฟอนต์รากที่กำหนดเอง รวมถึงโหมดรายการทีละหลายค่า

CSS และการออกแบบ ที่คล้ายกัน

ดูทั้งหมด
แปลงโค้ดเป็นรูปภาพ

เปลี่ยนโค้ดสั้น ๆ ให้เป็นภาพหน้าจอที่สวยงาม

เปิด →
สร้างไล่สี CSS

ออกแบบไล่สีแบบเส้นตรง วงกลม และกรวยด้วยภาพ แล้วคัดลอก CSS ได้ทันที

เปิด →
Glassmorphism CSS

💬 ความคิดเห็น

?

ยังไม่มีความคิดเห็น มาเป็นคนแรกกันเลย!

แปลง PX / REM / EM คืออะไร?

ตัวแปลง PX/REM/EM แปลงระหว่างหน่วย CSS ทั้งสาม — rem สัมพันธ์กับขนาดฟอนต์ราก ส่วน em สัมพันธ์กับขนาดฟอนต์บริบทที่ปรับแยกได้

ใช้งานอย่างไร?

  1. ปรับขนาดฟอนต์รากและขนาดฟอนต์บริบทตามต้องการ
  2. สลับระหว่างโหมดค่าเดียวและโหมดรายการเป็นชุดเพื่อแปลง

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

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

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

รูปแบบตัวเลขของโหมดเป็นชุดมีข้อจำกัดไหม?

กรอกหนึ่งตัวเลขต่อบรรทัด รองรับทศนิยม บรรทัดที่แยกวิเคราะห์ไม่ได้จะถูกระบุเป็นข้อผิดพลาดอย่างชัดเจนในตารางผลลัพธ์ แทนที่จะถูกข้ามแบบเงียบ ๆ หรือถือเป็น 0

เครื่องมือนี้แยกวิเคราะห์ไฟล์ CSS ของฉันไหม?

ไม่ V1 แปลงเฉพาะค่าเดี่ยว ๆ — การแยกวิเคราะห์และแปลงไฟล์ CSS ทั้งไฟล์อัตโนมัติเป็นฟีเจอร์ V2 ที่วางแผนไว้ ไม่รวมอยู่ที่นี่

rem จะคำนวณเทียบกับขนาดฟอนต์รากนี้เสมอ

em คำนวณเทียบกับขนาดฟอนต์แม่/บริบทที่แยกต่างหากนี้ ไม่ใช่ขนาดรากด้านบน

px

16

rem

1

em

1

สร้างโค้ดเบลอพื้นหลังและขอบโปร่งแสงแบบเรียลไทม์

เปิด →