ตัวแปลง PX เป็น REM

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

สูตร PX เป็น REM

การแปลงระหว่างพิกเซลและ rem เป็นการหารเพียงครั้งเดียว สิ่งเดียวที่ต้องรู้คือขนาดฟอนต์รากของเอกสาร

เมื่อใช้ขนาดฟอนต์รากเริ่มต้นของเบราว์เซอร์ที่ 16 px จะได้ 24px ÷ 16 = 1.5rem และ 1.5rem × 16 = 24px หากสไตล์ชีตของคุณกำหนด html { font-size: 62.5%; } ขนาดฟอนต์รากจะเป็น 10 px และ 24 px เดิมจะเท่ากับ 2.4rem

ตารางการแปลง PX เป็น REM (ราก 16px)

rem เทียบกับ em: เหตุใดการซ้อนจึงเปลี่ยนทุกอย่าง

rem วัดเทียบกับองค์ประกอบ ราก (html) จึงมีความหมายเหมือนกันทุกที่ในเอกสาร ส่วน em วัดเทียบกับขนาดฟอนต์ที่คำนวณแล้วขององค์ประกอบ แม่ ดังนั้นค่า em เดียวกันจะทบกันเมื่อซ้อนองค์ประกอบ แผนภาพนี้แสดงตัวคูณ 1.5 เดียวกันที่ใช้ลึกลงไปสามระดับ โดยเริ่มจากราก 16 px:

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

เหตุใดจึงใช้ rem แทน px?

• การเข้าถึง ผู้เยี่ยมชมที่ตั้งขนาดฟอนต์เริ่มต้นของเบราว์เซอร์เป็น 20 px จะเห็นทุกขนาดที่ใช้ rem ขยายตามสัดส่วน ขนาดที่กำหนดตายตัวด้วย px จะไม่สนค่ากำหนดนั้นเลย
• ปุ่มควบคุมเดียวสำหรับการปรับสเกลทั้งระบบ เปลี่ยนขนาดฟอนต์รากใน media query แล้วสเกลตัวอักษรและจังหวะระยะห่างทั้งหมดจะเปลี่ยนไปพร้อมกัน โดยไม่ต้องกำหนดค่าทับสำหรับแต่ละคอมโพเนนต์
• จังหวะระยะห่างสม่ำเสมอ การกำหนด padding และ margin เป็น rem ช่วยให้จังหวะแนวตั้งผูกกับสเกลตัวอักษรแทนที่จะค่อย ๆ แยกออกจากกัน
• เหมาะกับ design token ระบบออกแบบสมัยใหม่ (รวมถึงสเกลเริ่มต้นของ Tailwind) เผยแพร่ขนาดเป็น rem ดังนั้นการแปลงค่า px เดิมจะช่วยให้ส่งต่องานได้ง่ายขึ้น

กลเม็ดขนาดฟอนต์ราก 62.5%

หลายทีมเพิ่มกฎนี้เพื่อให้ 1rem เท่ากับ 10 px ที่จำง่าย ทำให้คำนวณในใจได้สะดวก:

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* กลับเป็น 16px ที่อ่านง่าย */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

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

rem ใน Media Query

ภายใน media query ค่า rem จะอ้างอิงขนาดฟอนต์ราก เริ่มต้น ของเบราว์เซอร์ ไม่ใช่ขนาดฟอนต์ของ html ที่คุณกำหนดใน CSS ดังนั้น @media (min-width: 48rem) จะเท่ากับ 768 px เสมอ แม้สไตล์ชีตจะประกาศ html { font-size: 10px } ก็ตาม ทำให้เบรกพอยต์ที่ใช้ rem ปลอดภัยและคาดเดาได้ และนี่เป็นหนึ่งในไม่กี่ตำแหน่งที่ em กับ rem ทำงานเหมือนกัน

กรณีที่ยังควรใช้ px

• เส้นขอบบางมากและเส้นคั่น — เส้นขอบ 1 px ควรคงเป็น 1 px การปรับสเกลจะทำให้เกิดเส้นย่อยพิกเซลที่พร่ามัว
• ทรัพยากรขนาดตายตัว — ออฟเซ็ตของสไปรต์ ออฟเซ็ตเงาที่ต้องแม่นยำ และรูปภาพที่มีขนาดดั้งเดิมแน่นอน
• เอาต์พุตจาก Canvas และงานพิมพ์ — เมื่อการวัดเป็นพิกเซลจริงหรือพิกเซลของอุปกรณ์คือสิ่งที่คุณต้องการอย่างแท้จริง

วิธีใช้ตัวแปลงนี้

1. เลือกทิศทาง: px → rem, rem → px, px → em หรือ em → px
2. ป้อนค่าของคุณ: หนึ่งตัวเลขหรือสเกลทั้งชุด โดยคั่นด้วยจุลภาคหรือเว้นวรรค (ครั้งละไม่เกิน 20 ค่า) ระบบยอมรับและละเว้นหน่วยต่อท้าย เช่น 24px
3. กำหนดขนาดฟอนต์ราก: ใช้ 16 สำหรับค่าเริ่มต้นของเบราว์เซอร์ หรือแตะชิปพรีเซ็ตสำหรับ 10 (กลเม็ด 62.5%), 12, 14, 18 หรือ 20
4. คลิกแปลง: อ่านตารางผลลัพธ์ ไม้บรรทัดขนาดจริง ตัวอย่างการเข้าถึง และบล็อก CSS
5. คัดลอก CSS: ปุ่มเดียวจะคัดลอกการประกาศ font-size ทุกค่า โดยเก็บค่าพิกเซลต้นทางไว้ในคอมเมนต์

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

ฉันจะแปลง px เป็น rem ได้อย่างไร

นำค่าพิกเซลหารด้วยขนาดฟอนต์ราก เมื่อขนาดฟอนต์รากเริ่มต้นของเบราว์เซอร์คือ 16 px, 24 px ÷ 16 = 1.5rem หากต้องการแปลงกลับ ให้คูณค่า rem ด้วยขนาดฟอนต์ราก: 1.5rem × 16 = 24 px

1rem มีกี่ px

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

rem กับ em ต่างกันอย่างไร

rem อ้างอิงขนาดฟอนต์รากบนองค์ประกอบ html เสมอ ดังนั้น 1.5rem จึงมีขนาดเท่ากันทุกที่ในเอกสาร ส่วน em อ้างอิงขนาดฟอนต์ขององค์ประกอบแม่ ดังนั้นองค์ประกอบที่ซ้อนกันจะทบค่า: 1.5em ภายในอีก 1.5em จะแสดงผลที่ 2.25 เท่าของขนาดฐาน

กลเม็ดขนาดฟอนต์ราก 62.5 เปอร์เซ็นต์คืออะไร

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

ควรใช้ px หรือ rem สำหรับขนาดฟอนต์

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

ค่า rem ต้องเป็นตัวเลขกลมหรือไม่

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

rem ใช้กับ padding, margin และ media query ได้หรือไม่

ได้ rem ใช้ได้ทุกที่ที่ CSS ยอมรับค่าความยาว รวมถึง padding, margin, width, gap และ border-radius ใน media query rem จะอ้างอิงขนาดฟอนต์รากเริ่มต้น 16 px ไม่ใช่ขนาดฟอนต์ html ที่กำหนดเอง ดังนั้นเบรกพอยต์ 48rem จะเท่ากับ 768 px เสมอ

แหล่งข้อมูลเพิ่มเติม

• หน่วยความยาว CSS - MDN
• ความยาวสัมพันธ์กับฟอนต์ - ค่า CSS ของ W3C