Softonic

เครื่องแปลง EM เป็น REM

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

นักออกแบบส่งสเปกจาก Figma มาเป็นพิกเซล ในขณะที่โค้ดเบสใช้ rem และครึ่งหนึ่งของคอมโพเนนต์กลับเขียนด้วย em ในจุดที่ค่าจะเปลี่ยนไปตามขนาดฟอนต์ขององค์ประกอบแม่ เครื่องแปลงนี้คำนวณค่าเทียบเท่า px และ rem ของค่า em ใด ๆ ที่ขนาดฟอนต์รากใดก็ได้ คุณจึงคัดลอกค่าที่ถูกต้องไปวางในไฟล์ CSS ได้เลย โดยไม่ต้องคำนวณในใจใหม่ทุกครั้ง

วิธีแปลงค่า em, rem และพิกเซล

  1. 1

    ตั้งขนาดฟอนต์พื้นฐาน

    โดยทั่วไปคือ 16px ซึ่งเป็นค่าเริ่มต้นของเบราว์เซอร์ บางระบบออกแบบใช้ 14px หรือ 18px เป็นขนาดราก

  2. 2

    สำหรับ em ให้ตั้งขนาดฟอนต์ขององค์ประกอบแม่

    em เป็นค่าที่สัมพันธ์กับองค์ประกอบแม่ ถ้าองค์ประกอบแม่มีขนาด 20px แล้ว 1em จะเท่ากับ 20px

  3. 3

    ป้อนค่า

    ด้วยหน่วย em ค่าเทียบเท่า px และ rem จะอัปเดตให้อัตโนมัติ

  4. 4

    อ่านผลการแปลง

    ค่าของ px, em และ rem จะแสดงทั้งค่าที่ปัดเศษแล้วและค่าทศนิยมที่แม่นยำ

สูตรคำนวณ

rem จะสัมพันธ์กับองค์ประกอบราก (<html>) เสมอ

px = rem * root_font_size rem = px / root_font_size

em สัมพันธ์กับองค์ประกอบแม่ขององค์ประกอบปัจจุบัน

px = em * parent_font_size em = px / parent_font_size

การแปลงที่รากขนาด 16px

พิกเซล rem em (เมื่อองค์ประกอบแม่เป็น 16px)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

ควรใช้หน่วยไหนเมื่อไร

  • px: เส้นขอบ รายละเอียดที่ละเอียดอ่อน และการควบคุมที่แม่นยำ เช่น เงากล่อง (box-shadow) 1px หรือเส้นขอบ 1px
  • rem: มาร์จิน แพดดิง และงานพิมพ์ที่ควรปรับขนาดตามการตั้งค่าฟอนต์ของผู้ใช้
  • em: ระยะห่างเฉพาะภายในคอมโพเนนต์ที่ปรับตามขนาดฟอนต์ของตัวเอง (ปุ่ม ป้ายกำกับ)
  • % และ vw/vh: สัมพันธ์กับคอนเทนเนอร์และสัมพันธ์กับวิวพอร์ต ซึ่งเป็นอีกเรื่องหนึ่ง

เทคนิค 62.5%

โค้ดเบสบางแห่งตั้งค่า html { font-size: 62.5%; } ซึ่งทำให้ 1rem = 10px วิธีนี้ช่วยให้การคำนวณ rem ง่ายขึ้น (24px = 2.4rem) แต่ต้องแลกกับการทำลายการตั้งค่าขนาดฟอนต์ในเบราว์เซอร์ของผู้ใช้ที่ซูมข้อความ แนวปฏิบัติสมัยใหม่จึงเลี่ยงเทคนิคนี้ และใช้รากขนาด 16px พร้อมยอมรับการมีทศนิยม

กับดักการสืบทอดของ em

em สืบทอดผ่านลำดับชั้นแบบคาสเคด ถ้าองค์ประกอบแม่มี font-size เป็น 1.2em เทียบกับองค์ประกอบแม่ของมันเอง และภายในนั้นคุณตั้ง padding เป็น 1em แพดดิงจะเท่ากับ 1.2 × 1.2 = 1.44 × ราก em ที่ซ้อนกันจะทวีคูณกันไป จึงอาจให้ผลลัพธ์ที่คาดไม่ถึง ส่วน rem ไม่มีปัญหานี้ เพราะมันอ้างอิงกับ <html> เสมอ

ตัวอย่างสเกลงานพิมพ์

สเกลตัวอักษรแบบโมดูลาร์ที่พบได้บ่อยด้วยอัตราส่วน 1.25:

ระดับ rem px (เมื่อรากเป็น 16)
คำบรรยาย 0.75 12
เนื้อความ 1 16
เนื้อความ (ใหญ่) 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
ส่วนเด่น 3.052 ~49

การใช้ rem หมายความว่าทุกระดับจะปรับสัดส่วนไปด้วยกัน หากผู้ใช้เพิ่มขนาดฟอนต์ในเบราว์เซอร์เพื่อการเข้าถึงที่ดีขึ้น

เคารพการตั้งค่าของผู้ใช้

การกำหนดค่า px แบบตายตัวทั่วทั้งสไตล์ชีตจะกระทบผู้ใช้ที่ซูมข้อความด้วยเหตุผลด้านการมองเห็น ส่วน rem จะเคารพการตั้งค่าเหล่านั้น เพราะมันอ้างอิงกับขนาดรากที่ผู้ใช้เปลี่ยนได้ นี่จึงเป็นเหตุผลหลักที่คู่มือสไตล์แนะนำให้ใช้ rem สำหรับงานพิมพ์และระยะห่าง

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

ใช้ rem สำหรับงานพิมพ์ ระยะห่าง และขนาดของเลย์เอาต์ ใช้ em สำหรับขนาดภายในคอมโพเนนต์ที่ควรปรับตามขนาดฟอนต์ของคอมโพเนนต์เอง (ปุ่ม ไอคอนภายในข้อความ) ใช้ px เฉพาะรายละเอียดที่ละเอียดอ่อนซึ่งไม่ควรปรับขนาด

ผู้ใช้เปลี่ยนขนาดฟอนต์เริ่มต้นของเบราว์เซอร์ได้ Chrome ใช้ค่าเริ่มต้น 16px หากผู้ใช้ตั้งเป็น 18px ค่า rem ทั้งหมดของคุณจะใหญ่ขึ้น 12.5 เปอร์เซ็นต์ นักออกแบบที่สมมติว่ารากคือ 16px ตายตัวมักมองข้ามจุดนี้ ส่วน rem จะเคารพการเลือกของผู้ใช้ ซึ่งนั่นคือจุดประสงค์ของมัน

สเกลระยะห่างของ Tailwind ใช้ rem โดย text-base คือ 1rem = 16px ที่ค่าเริ่มต้น และ text-lg คือ 1.125rem สเกลนี้สอดคล้องกันและเคารพขนาดฟอนต์รากตั้งแต่แรก

ไม่ ตัวเลขที่คุณป้อนใช้สำหรับคำนวณการแปลงเท่านั้น และไม่มีการเก็บข้อมูลใด ๆ

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

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

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

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

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

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

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

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

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

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

เครื่องมือตรวจสอบหมายเลขโทรศัพท์

ตรวจสอบโครงสร้างหมายเลขตามประเทศ พร้อมดูภูมิภาค ประเภท และรูปแบบ E.164 ระหว่างประเทศ ในประเทศ และ RFC 3966

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