nicetool.dev logo

แปลง PX เป็น REM

พิมพ์ในช่องใดก็ได้ คลิกแถวในตารางเพื่อดึงค่า หรือวาง CSS ด้านล่างเพื่อแปลงทั้งหมด

24px = 1.5rem = 18pt = 150%

ตารางแปลงค่า (ฐาน 16px)

pxrempt
1px0.0625rem0.75pt
2px0.125rem1.5pt
4px0.25rem3pt
6px0.375rem4.5pt
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
28px1.75rem21pt
32px2rem24pt
36px2.25rem27pt
40px2.5rem30pt
48px3rem36pt
56px3.5rem42pt
64px4rem48pt
72px4.5rem54pt
80px5rem60pt
96px6rem72pt
128px8rem96pt

แปลงโค้ด CSS

แปลงแล้ว 6 ค่า
.card {
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

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

px เป็นหน่วย CSS แบบคงที่ ส่วน 1rem เท่ากับขนาดฟอนต์ขององค์ประกอบราก html ซึ่งค่าเริ่มต้นคือ 16px ในทุกเบราว์เซอร์ การกำหนดขนาดตัวอักษร ระยะห่าง และเลย์เอาต์เป็น rem ทำให้ทุกอย่างขยายไปพร้อมกันเมื่อผู้ใช้เพิ่มขนาดฟอนต์เริ่มต้นในการตั้งค่าเบราว์เซอร์ ซึ่งเป็นข้อกำหนดสำคัญด้านการเข้าถึง (WCAG 1.4.4 การปรับขนาดข้อความ) สูตรง่ายมาก rem = px ÷ ขนาดฟอนต์ราก ดังนั้น 24px คือ 1.5rem เมื่อฐานเป็น 16px ส่วน em ทำงานแบบเดียวกันแต่อิงขนาดฟอนต์ขององค์ประกอบแม่ และจะทบกันเมื่อซ้อนหลายชั้น

ฟีเจอร์

  • • แปลง px และ rem ได้สองทาง พร้อมกำหนดขนาดฟอนต์รากเอง
  • • แสดงค่า pt และเปอร์เซ็นต์ที่เทียบเท่าด้วย
  • • ตารางขนาดที่ใช้บ่อยตั้งแต่ 1px ถึง 128px คลิกได้
  • • แปลงค่า px ทั้งหมดในโค้ด CSS ในครั้งเดียว
  • • ตัวเลือกคงเส้นขอบบาง 1px ไว้เป็น px

ทำงานในเครื่อง

การแปลงทั้งหมดเกิดขึ้นในเบราว์เซอร์ รวมถึง CSS ที่คุณวาง ไม่มีการอัปโหลดใด ๆ

คำนวณทันที ฝั่งไคลเอนต์ 100%

วิธีใช้ แปลง PX เป็น REM

  1. 1

    ตรวจขนาดฟอนต์ราก ใช้ 16px ไว้ เว้นแต่โปรเจกต์ตั้ง html { font-size } เป็นค่าอื่น เช่น 10px หรือ 62.5%

  2. 2

    พิมพ์ค่าในช่อง px เพื่อดู rem หรือพิมพ์ในช่อง rem เพื่อดู px บรรทัดด้านล่างแสดง pt และเปอร์เซ็นต์ด้วย

  3. 3

    คลิกแถวใดก็ได้ในตารางเพื่อดึงขนาดที่ใช้บ่อยตั้งแต่ 1px ถึง 128px

  4. 4

    วางโค้ด CSS ในช่องแปลงทั้งชุด ทุกค่า px จะกลายเป็น rem ส่วน 0px เป็น 0 และเส้นขอบ 1px คงเป็น px ได้ แล้วคัดลอกผลลัพธ์ไปใส่สไตล์ชีต

ตัวอย่างการใช้งานจริง

สเกลตัวอักษร

สเกล 14 / 16 / 20 / 24 / 32px จะเป็น 0.875 / 1 / 1.25 / 1.5 / 2rem หัวข้อจึงขยายตามเมื่อผู้ใช้ขยายตัวอักษรในเบราว์เซอร์

ย้ายสไตล์ชีตเก่า

วาง CSS เก่าที่เขียนด้วย px แล้วแปลง padding, margin และขนาดฟอนต์ในครั้งเดียว จากนั้นตรวจ media query และคงเส้นบางไว้เป็น px

ทำตามดีไซน์ใน Figma

นักออกแบบส่งขนาดมาเป็น px แปลงโทเค็นระยะห่าง 4, 8, 12, 16 และ 24px เป็น 0.25, 0.5, 0.75, 1 และ 1.5rem สำหรับ design system

เทคนิค 62.5%

บางโปรเจกต์ตั้ง html { font-size: 62.5% } เพื่อให้ 1rem = 10px ตั้งขนาดรากเป็น 10 แล้ว 24px จะเป็น 2.4rem ที่จำง่าย

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

ควรใช้ rem หรือ px?+

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

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

rem อิงขนาดฟอนต์ของ html ราก จึงคาดเดาได้ ส่วน em อิงองค์ประกอบแม่ ค่า em ที่ซ้อนกันจะคูณกัน มีประโยชน์กับคอมโพเนนต์แต่พลาดได้ง่าย

ฐานเป็น 16px เสมอไหม?+

เป็นค่าเริ่มต้นในทุกเบราว์เซอร์ แต่ผู้ใช้เปลี่ยนได้และ CSS ก็เขียนทับที่ html ได้ ควรแปลงด้วยขนาดรากที่โปรเจกต์ใช้จริงเสมอ

media query ควรใช้ rem ไหม?+

media query ที่ใช้ em หรือ rem อิงขนาดฟอนต์เริ่มต้นของเบราว์เซอร์ ไม่ใช่กฎ html ของคุณ และจะปรับตามเมื่อผู้ใช้ขยายตัวอักษร หลายทีมจึงใช้ em ใน media query