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 ของหน้าด้วย จึงไม่ควรป้อนข้อมูลที่ละเอียดอ่อน

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

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

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

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

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

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

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

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