Softonic

ตัวแปลงพิกเซลเป็น em

ขั้นตอน 1 / 2
ผลลัพธ์

แปลงค่าพิกเซลโดยเทียบกับขนาดฟอนต์ฐาน เครื่องมือจะแสดงค่าem, ค่าremที่มีตัวเลขอัตราส่วนเท่ากัน, เปอร์เซ็นต์ และพอยต์ CSS ค่าเริ่มต้นคือ 16px แต่ 16px เป็นเพียงค่าเริ่มต้นที่เบราว์เซอร์นิยมใช้เท่านั้น หากต้องการหาemให้ระบุขนาดฟอนต์เฉพาะจุดที่ใช้งานจริง ส่วนremให้ระบุขนาดฟอนต์ขององค์ประกอบราก (<html>).

วิธีแปลงค่าพิกเซล

  1. 1

    ป้อนค่าพิกเซล

    ป้อนค่าพิกเซล CSS เป็นตัวเลข

  2. 2

    กำหนดค่าฐานให้ถูกต้อง

    ใช้ขนาดฟอนต์ขององค์ประกอบที่เกี่ยวข้องสำหรับ`em` หรือขนาดฟอนต์ขององค์ประกอบรากสำหรับ`rem` โดยค่าฐานต้องไม่เป็น 0

  3. 3

    ดูผลลัพธ์ทั้งสี่แบบ

    เครื่องมือแสดง px ÷ ค่าฐานเป็น em/rem, อัตราส่วน × 100 เป็นเปอร์เซ็นต์ และ px × 0.75 เป็น pt

สูตรและตัวอย่าง

em หรือ rem = px / ค่าฐาน
เปอร์เซ็นต์   = (px / ค่าฐาน) × 100
pt            = px × 0.75

เมื่อใช้24pxกับค่าฐาน16px ผลลัพธ์คือ1.5em, 1.5rem, 150% และ18pt CSS กำหนดให้96px = 1in = 72pt จึงต้องคูณด้วย 0.75 เมื่อแปลงเป็นพอยต์ ความสัมพันธ์นี้เป็นนิยามของหน่วยอ้างอิงใน CSS ไม่ได้หมายความว่าพิกเซลบนหน้าจอจะตรงกับระยะทางจริงเสมอไป

หน่วย CSS ค่าฐานควรหมายถึงอะไร
em ขนาดฟอนต์ที่คำนวณแล้วขององค์ประกอบ หรือขนาดฟอนต์ที่สืบทอดมาเมื่อใช้กับพร็อพเพอร์ตีfont-sizeเอง
rem ขนาดฟอนต์ขององค์ประกอบราก
% ค่าฐานเดียวกันที่เลือก โดยแสดงเป็น 100%
pt อัตราส่วน CSS คงที่เทียบกับ px โดยไม่ใช้ช่องค่าฐาน

ข้อควรระวังในการใช้งาน

  • ขนาดฟอนต์emที่ซ้อนกันจะคูณทบกัน เช่น1.2emที่อยู่ภายใน1.2emจะมีขนาดเป็น1.44เท่าขององค์ประกอบระดับบนสุด
  • ค่าemและremที่แสดงมีตัวเลขเท่ากัน เพราะเครื่องคิดเลขมีช่องค่าฐานเพียงช่องเดียว แต่ความหมายของหน่วยทั้งสองใน CSS ยังคงต่างกัน
  • em/rem แสดงทศนิยมสูงสุด 6 ตำแหน่ง ส่วนเปอร์เซ็นต์/pt แสดงสูงสุด 4 ตำแหน่ง และตัดเลขศูนย์ท้ายที่ไม่จำเป็นออก

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

ใช้remเมื่อต้องการให้ขนาดอิงกับองค์ประกอบราก และใช้emเมื่อต้องการให้คอมโพเนนต์ปรับตามขนาดข้อความเฉพาะจุด อย่าลืมป้อนค่าฐานให้ตรงกับหน่วยที่ต้องการก่อนคัดลอกผลลัพธ์

ไม่เสมอไป 16px เป็นค่าเริ่มต้นที่พบบ่อย แต่การตั้งค่าของเบราว์เซอร์และ CSS ของเว็บไซต์อาจเปลี่ยนค่านี้ได้ หากต้องการความแม่นยำควรตรวจสอบขนาดฟอนต์ที่คำนวณจริง

เว็บไซต์จะประมวลผลค่าที่ป้อนเพื่ออัปเดตผลลัพธ์ และในโหมดทีละขั้น ค่าจะปรากฏอยู่ใน URL ของหน้าด้วย จึงไม่ควรป้อนข้อมูลที่ละเอียดอ่อน

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบอีเมล

ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig ด้วยกฎสไตล์และขนาดการเยื้อง การจบบรรทัด ชุดอักขระ และช่องว่างของคุณ เพื่อให้การจัดรูปแบบสอดคล้องกันในทุก IDE และโปรแกรมแก้ไข

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องมือนี้มีให้บริการในภาษาอื่น