แปลง rem เป็นพิกเซล (px)
หนึ่ง rem เท่ากับ 16 พิกเซลที่ขนาดแบบอักษรเริ่มต้นของเบราว์เซอร์ ดังนั้น 1.5 rem จึงเท่ากับ 24 พิกเซล การคำนวณมีเพียงการคูณครั้งเดียว คือค่า rem คูณขนาดแบบอักษรพื้นฐานของหน้า ใส่ค่าในช่องแรก และถ้าหน้าของคุณใช้ฐานอื่น ให้พิมพ์ฐานนั้นในช่อง font-size พื้นฐาน
rem คืออะไร และพิกเซลใน CSS คืออะไร
rem เป็นหน่วยความยาวแบบสัมพัทธ์ใน CSS ค่าของหน่วยนี้เท่ากับขนาดแบบอักษรที่คำนวณแล้วขององค์ประกอบรากของหน้า ซึ่งก็คือองค์ประกอบ html[1] ถ้าขนาดแบบอักษรของ html เป็น 16 พิกเซล ทุก rem ในหน้านั้นจะเท่ากับ 16 พิกเซล และเมื่อขนาดนี้เปลี่ยน ขนาดทุกค่าที่เขียนด้วย rem ก็จะเปลี่ยนไปพร้อมกัน
พิกเซล (px) ใน CSS เป็นหน่วยคงที่ ซึ่งมาตรฐานกำหนดไว้ที่ 1/96 นิ้ว[1] ใน CSS หนึ่งนิ้วจึงเท่ากับ 96 พิกเซล และ เครื่องมือแปลงนิ้วเป็น px ก็ตั้งความละเอียดเริ่มต้นไว้ที่ 96 พิกเซลต่อนิ้ว ในความหมายทั่วไป พิกเซลคือหน่วยพื้นฐานของภาพ เป็นจุดภาพบนจอแสดงผลหรือในรูปภาพ[2] พิกเซลของ CSS ไม่เปลี่ยนเมื่อผู้อ่านปรับขนาดแบบอักษรในเบราว์เซอร์ และโปรแกรมออกแบบอย่าง Figma ก็แสดงขนาดเป็นพิกเซล การแปลง rem เป็นพิกเซลจึงช่วยให้เทียบสไตล์ชีตกับงานออกแบบได้
:root ในหน้า HTML ชี้ไปที่องค์ประกอบ html เอง ขนาดแบบอักษรที่เขียนไว้ตรงนี้จึงกลายเป็นฐานของค่า rem ทุกค่า ในส่วนที่เห็นในภาพ selector นี้มีตัวแปรสีและไม่ได้กำหนดขนาดแบบอักษร ฐานจึงยังเป็นค่าของเบราว์เซอร์ ภาพถ่าย: Pankaj Patel, Unsplash1 rem เท่ากับกี่พิกเซล
1 rem เท่ากับ 16 พิกเซล ตราบใดที่ขนาดแบบอักษรพื้นฐานเป็นค่าเริ่มต้นของ Chrome, Edge และ Firefox สูตรคือ พิกเซล = rem × ขนาดแบบอักษรพื้นฐาน ดังนั้น 1.5 rem เท่ากับ 24 พิกเซล ส่วน 0.875 rem เท่ากับ 14 พิกเซล ซึ่งเป็นขนาดข้อความ text-sm ของ Tailwind CSS[3]
เลข 16 เปลี่ยนได้จากสองทาง ทางแรกคือสไตล์ชีต กฎ html { font-size: 62.5% } ทำให้ฐานเป็น 10 พิกเซล 1.5 rem จึงเป็น 15 พิกเซล ทางที่สองคือผู้อ่าน เมื่อเราเลือก “ขนาดใหญ่” ในรายการ “ขนาดแบบอักษร” ของ Chrome ค่า 1 rem กลายเป็น 20 พิกเซล
ตัวแปลงจึงมีช่องที่สามสำหรับฐานของหน้า ใส่ฐานที่หน้าของคุณใช้ แล้วจะได้ค่าพิกเซลที่ผู้อ่านหน้านั้นเห็น ถ้ายังไม่รู้ฐาน ให้เริ่มจาก 16 ที่อยู่ในช่องอยู่แล้ว
แปลง rem เป็น px อย่างไร สูตรและตัวอย่าง
สูตรคือ px = rem × font-size โดย font-size คือขนาดแบบอักษรขององค์ประกอบ html ลองดูระยะห่าง 1.25 rem ที่ฐานเริ่มต้น 16 พิกเซล จะได้ 1.25 × 16 = 20 พิกเซล ส่วนที่ฐาน 20 พิกเซล ระยะเดียวกันจะเป็น 25 พิกเซล
เทคนิค 62.5% ตั้งขนาดแบบอักษรของ html ไว้ที่ 62.5% ของค่าเริ่มต้น ฐานจึงเป็น 10 พิกเซล เพราะ 62.5% ของ 16 คือ 10 จากนั้นค่าจะอ่านได้ตรงตัว คือ 2.4 rem เท่ากับ 24 พิกเซล ถ้าผู้อ่านเพิ่มขนาดแบบอักษรในเบราว์เซอร์เป็น 20 พิกเซล ฐานจะเป็น 12.5 พิกเซล และ 2.4 rem จะเป็น 30 พิกเซล ช่อง font-size พื้นฐานของตัวแปลงรับเปอร์เซ็นต์แบบเดียวกับที่เขียนในสไตล์ชีต และคำนวณจาก 16 พิกเซล เมื่อใส่ 62.5% ตัวแปลงจะใช้ฐาน 10 พิกเซล
สูตรเดียวกันใช้ย้อนกลับได้ด้วยการหาร ซึ่งเป็นสิ่งที่ เครื่องมือแปลง px เป็น rem ทำ ส่วนหน่วย em คำนวณจากขนาดแบบอักษรขององค์ประกอบแม่ และมี เครื่องมือแปลง em เป็น px พร้อมช่องสำหรับขนาดขององค์ประกอบแม่ ถ้าขนาดเขียนเป็นพอยต์ (pt) ซึ่งเป็นหน่วยขนาดตัวอักษรในโปรแกรมประมวลผลคำ ให้แปลงเป็นพิกเซลก่อนด้วย เครื่องมือแปลง pt เป็น px
14px แล้วตามด้วย 0.875rem บรรทัดที่สองมาหลังบรรทัดแรก เบราว์เซอร์จึงใช้ 0.875rem ที่ฐาน 16 พิกเซล ผลยังคงเป็น 14 พิกเซล เพราะ 0.875 × 16 = 14 ส่วนที่ฐาน 20 พิกเซล ข้อความจะเป็น 17.5 พิกเซล ภาพถ่าย: Nick Karvounis, Unsplashตารางแปลง rem เป็น px ที่ฐานสามค่า
| ค่า rem | ที่ 16 px (ค่าเริ่มต้น) | ที่ 10 px (62.5%) | ที่ 20 px (ขนาดใหญ่) |
|---|---|---|---|
| 0.125 rem | 2 px | 1.25 px | 2.5 px |
| 0.25 rem | 4 px | 2.5 px | 5 px |
| 0.375 rem | 6 px | 3.75 px | 7.5 px |
| 0.5 rem | 8 px | 5 px | 10 px |
| 0.625 rem | 10 px | 6.25 px | 12.5 px |
| 0.75 rem | 12 px | 7.5 px | 15 px |
| 0.8 rem | 12.8 px | 8 px | 16 px |
| 0.875 rem | 14 px | 8.75 px | 17.5 px |
| 0.9 rem | 14.4 px | 9 px | 18 px |
| 1 rem | 16 px | 10 px | 20 px |
| 1.1 rem | 17.6 px | 11 px | 22 px |
| 1.125 rem | 18 px | 11.25 px | 22.5 px |
| 1.2 rem | 19.2 px | 12 px | 24 px |
| 1.25 rem | 20 px | 12.5 px | 25 px |
| 1.3 rem | 20.8 px | 13 px | 26 px |
| 1.375 rem | 22 px | 13.75 px | 27.5 px |
| 1.4 rem | 22.4 px | 14 px | 28 px |
| 1.5 rem | 24 px | 15 px | 30 px |
| 1.6 rem | 25.6 px | 16 px | 32 px |
| 1.625 rem | 26 px | 16.25 px | 32.5 px |
| 1.75 rem | 28 px | 17.5 px | 35 px |
| 1.8 rem | 28.8 px | 18 px | 36 px |
| 1.875 rem | 30 px | 18.75 px | 37.5 px |
| 2 rem | 32 px | 20 px | 40 px |
| 2.25 rem | 36 px | 22.5 px | 45 px |
| 2.5 rem | 40 px | 25 px | 50 px |
| 2.75 rem | 44 px | 27.5 px | 55 px |
| 3 rem | 48 px | 30 px | 60 px |
| 3.5 rem | 56 px | 35 px | 70 px |
| 3.75 rem | 60 px | 37.5 px | 75 px |
| 4 rem | 64 px | 40 px | 80 px |
| 4.5 rem | 72 px | 45 px | 90 px |
| 5 rem | 80 px | 50 px | 100 px |
| 6 rem | 96 px | 60 px | 120 px |
| 8 rem | 128 px | 80 px | 160 px |
| 10 rem | 160 px | 100 px | 200 px |
| 16 rem | 256 px | 160 px | 320 px |
| 20 rem | 320 px | 200 px | 400 px |
| 32 rem | 512 px | 320 px | 640 px |
ขนาดแบบอักษรของ Tailwind CSS เท่ากับกี่พิกเซล
| คลาสของ Tailwind | ค่า rem | พิกเซลที่ 16 | พิกเซลที่ 20 |
|---|---|---|---|
| text-xs | 0.75 rem | 12 px | 15 px |
| text-sm | 0.875 rem | 14 px | 17.5 px |
| text-base | 1 rem | 16 px | 20 px |
| text-lg | 1.125 rem | 18 px | 22.5 px |
| text-xl | 1.25 rem | 20 px | 25 px |
| text-2xl | 1.5 rem | 24 px | 30 px |
| text-3xl | 1.875 rem | 30 px | 37.5 px |
| text-4xl | 2.25 rem | 36 px | 45 px |
| text-5xl | 3 rem | 48 px | 60 px |
| text-6xl | 3.75 rem | 60 px | 75 px |
| text-7xl | 4.5 rem | 72 px | 90 px |
| text-8xl | 6 rem | 96 px | 120 px |
| text-9xl | 8 rem | 128 px | 160 px |
ตัวเลือกในรายการ “ขนาดแบบอักษร” ของ Chrome และ Edge ตั้งฐานไว้เท่าใด
| ตัวเลือกใน Chrome | ตัวเลือกใน Edge | ฐาน คือ 1 rem | 0.875 rem | 1.5 rem | 2 rem |
|---|---|---|---|---|---|
| เล็กมาก | ขนาดแบบอักษรเล็กมาก | 9 px | 7.88 px | 13.5 px | 18 px |
| ขนาดเล็ก | ขนาดแบบอักษรเล็ก | 12 px | 10.5 px | 18 px | 24 px |
| กลาง (แนะนำ) | ขนาดแบบอักษรปานกลาง (แนะนำ) | 16 px | 14 px | 24 px | 32 px |
| ขนาดใหญ่ | ขนาดแบบอักษรใหญ่ | 20 px | 17.5 px | 30 px | 40 px |
| ใหญ่มาก | ขนาดแบบอักษรใหญ่มาก | 24 px | 21 px | 36 px | 48 px |
ตัวแปลงนี้รับและคำนวณการเขียนแบบใดบ้าง
| สิ่งที่พิมพ์หรือวาง | ผลที่ตัวแปลงคำนวณ | สิ่งที่เกิดขึ้นกับการเขียนนี้ |
|---|---|---|
| ช่องแรก: ค่า rem ที่ฐาน 16 พิกเซล | ||
| 1.5 | 24 px | จุดทศนิยมแบบที่ใช้เขียนตัวเลขในภาษาไทยและใน CSS: 1.5 คูณ 16 |
| ๑.๕ | 24 px | เลขไทยพร้อมจุดทศนิยม เราแปลงเป็น 1.5 ก่อนคำนวณ |
| 1,5 | 24 px | จุลภาคที่ตามด้วยเลขหนึ่งหรือสองหลัก เราอ่านเป็นจุดทศนิยม |
| 1,125rem | 18 px | จุลภาคที่ติดกับ rem เราอ่านเป็นจุดทศนิยม แม้จะตามด้วยเลขสามหลัก เพราะ CSS เขียนทศนิยมด้วยจุดและไม่มีตัวคั่นหลักพัน ใต้ช่องจะมีคำแนะนำบอกอีกความหมายหนึ่ง คือ 1125 |
| 1,875 | 30000 px | ถ้าไม่มีหน่วย จุลภาคที่ตามด้วยเลขสามหลักพอดี เราอ่านเป็นตัวคั่นหลักพันแบบที่ใช้ในภาษาไทย ค่าจึงเป็น 1,875 rem ใต้ช่องจะมีคำแนะนำบอกอีกความหมายหนึ่ง คือ 1.875 |
| .875rem | 14 px | ค่าจากไฟล์ CSS ที่ถูกย่อ ไม่มีเลขศูนย์หน้าจุด เราอ่านเป็น 0.875 และข้ามคำว่า rem |
| font-size: 1.5rem; | 24 px | บรรทัดเต็มจากสไตล์ชีต เราใช้ตัวเลขและข้ามชื่อพร็อพเพอร์ตีกับเครื่องหมายอัฒภาค |
| --text-sm: 0.875rem; | 14 px | บรรทัดจากตัวแปรธีมของ Tailwind CSS ขีดสองตัวหน้าชื่อตัวแปรไม่นับเป็นเครื่องหมายลบ |
| margin-top: -0.5rem; | -8 px | ระยะขอบติดลบจากสไตล์ชีต เครื่องหมายลบที่ติดกับตัวเลขยังถูกนับ ผลจึงออกมาติดลบ |
| 3/4 | 12 px | เศษส่วนธรรมดา 3 หารด้วย 4 ได้ 0.75 rem |
| ช่อง “font-size พื้นฐาน”: ตัวแปลงคำนวณฐาน | ||
| 62.5% | 10 px | เปอร์เซ็นต์แบบที่เขียนให้องค์ประกอบ html คำนวณจากฐานเริ่มต้น 16 พิกเซล และ 62.5% ของ 16 คือ 10 |
| ๖๒.๕% | 10 px | เปอร์เซ็นต์เดียวกันที่เขียนด้วยเลขไทย |
| 125% | 20 px | เปอร์เซ็นต์ที่มากกว่า 100% โดย 125% ของ 16 คือ 20 เท่ากับฐานจากตัวเลือก “ขนาดใหญ่” ใน Chrome |
| font-size: 20px | 20 px | บรรทัดที่คัดลอกจากเครื่องมือสำหรับนักพัฒนา เราใช้ตัวเลขและข้ามชื่อพร็อพเพอร์ตีกับหน่วย |
| 18.5 | 18.5 px | ฐานที่มีทศนิยม รับได้ตราบใดที่อยู่ระหว่าง 1 ถึง 100 |
เปลี่ยนขนาดแบบอักษรพื้นฐานใน Chrome, Edge, Firefox และ Safari อย่างไร
ใน Chrome, Edge และ Firefox ขนาดที่ผู้อ่านเลือกจะกลายเป็นฐานของค่า rem ทุกค่าในหน้าที่เปิด ชื่อการตั้งค่าในที่นี้ตรงกับหน้าจอภาษาไทยของแต่ละเบราว์เซอร์
Chrome
เปิด “การตั้งค่า” ไปที่ “ลักษณะที่ปรากฏ” แล้วเลือกขนาดจากรายการ “ขนาดแบบอักษร” ปุ่ม “กำหนดค่าแบบอักษร” จะเปิดหน้าที่มีแถบเลื่อน “ขนาดแบบอักษร” และ “ขนาดแบบอักษรขั้นต่ำ”Edge
เปิด “การตั้งค่า” ไปที่ “ลักษณะที่ปรากฏ” และ “แบบอักษร” แล้วเลือกจากรายการ “ขนาดแบบอักษร” ชื่อตัวเลือกขึ้นต้นด้วยคำว่า ขนาดแบบอักษร และตัวเลือกตรงกลางคือ “ขนาดแบบอักษรปานกลาง (แนะนำ)”Firefox
เปิด “การตั้งค่า” ไปที่ “การช่วยเข้าถึง” และในส่วน “แบบอักษร” ให้เลือกตัวเลขจากรายการ “ขนาดแบบอักษร” Firefox เก็บขนาดนี้แยกตามระบบการเขียน และรู้ระบบของหน้าจากแอตทริบิวต์langในการวัดของเรา เราตั้งขนาดสำหรับอักษรไทยไว้ที่ 22 พิกเซล หน้าที่มีlang="th"ได้ 1 rem เท่ากับ 22 พิกเซล ส่วนหน้าที่ไม่มีlangยังคงเป็น 16 พิกเซล ปุ่ม “การตั้งค่าขั้นสูง” เปิดหน้าต่าง “แบบอักษร” ที่มีรายการ “แบบอักษรสำหรับ” และ “ขนาดแบบอักษรต่ำสุด”Safari บน Mac
ในเมนู Safari เลือก “การตั้งค่า” แล้วคลิก “ขั้นสูง” ที่นี่ Safari กำหนดได้เพียงขีดจำกัดล่าง ให้เปิดตัวเลือก “ห้ามใช้แบบอักษรที่มีขนาดเล็กกว่า” แล้วเลือกตัวเลข Apple แนะนำให้ลอง 12 หรือ 14 ถ้าไม่แน่ใจ[4]
ทำไมขนาดข้อความจึงเขียนด้วย rem
ข้อความที่เขียนด้วย rem จะใหญ่ขึ้นเมื่อผู้อ่านเพิ่มขนาดแบบอักษรในเบราว์เซอร์ ส่วนข้อความที่เขียนด้วยพิกเซลจะคงเดิม เรื่องนี้อยู่ในเกณฑ์ความสำเร็จ 1.4.4 “การปรับขนาดข้อความ” ของแนวทางการทำให้เนื้อหาเว็บสามารถเข้าถึงและใช้ประโยชน์ได้ (WCAG) ซึ่งฉบับแปลภาษาไทยที่ได้รับอนุญาตเขียนไว้ว่า “สามารถปรับขนาดข้อความได้สูงสุดถึงร้อยละ 200 โดยไม่ต้องใช้เทคโนโลยีสิ่งอำนวยความสะดวก โดยไม่สูญเสียเนื้อหาหรือฟังก์ชันการใช้งาน ยกเว้นคำบรรยายแทนเสียงและภาพข้อความ”[5] การแปลงเป็นพิกเซลช่วยเทียบผลกับงานออกแบบ ส่วนขนาดจากงานออกแบบให้เขียนลงสไตล์ชีตเป็น rem ด้วย เครื่องมือแปลง px เป็น rem
พิกเซล: แปลงจากหน่วยอื่น
แหล่งอ้างอิง
- CSS Values and Units Module Level 4 — W3C
- พิกเซล — วิกิพีเดีย
- font-size — Tailwind CSS
- เปลี่ยนการตั้งค่าขั้นสูงใน Safari บน Mac — Apple
- แนวทางการทำให้เนื้อหาเว็บสามารถเข้าถึงและใช้ประโยชน์ได้ (WCAG) 2.2 — W3C, ฉบับแปลภาษาไทยโดย สวทช.
- <length> CSS type — MDN Web Docs
เราคำนวณค่าทั้งหมดในตารางจากนิยามของหน่วย และตรวจสอบการคำนวณอีกครั้งก่อนเผยแพร่ ข้อมูลทางประวัติศาสตร์และชื่อหน่วยท้องถิ่นอ้างอิงจากแหล่งที่ระบุไว้ด้านบน
ตรวจสอบเนื้อหาล่าสุด: · เขียนและตรวจสอบโดย ทีมงาน Arteon
คำถามที่พบบ่อยเกี่ยวกับการแปลง rem เป็น px
1 rem เท่ากับ 16 พิกเซลเสมอหรือไม่
1 rem เท่ากับ 16 พิกเซลตราบใดที่ขนาดแบบอักษรพื้นฐานยังเป็นค่าเริ่มต้น[6] ถ้าหน้าเว็บกำหนดขนาดอื่นให้องค์ประกอบ html หรือผู้อ่านเปลี่ยนขนาดแบบอักษรในเบราว์เซอร์ ค่า 1 rem ก็จะเปลี่ยนตาม ตัวอย่างเช่น ตัวเลือก “ขนาดใหญ่” ใน Chrome ทำให้ 1 rem เป็น 20 พิกเซล
1.5 rem เท่ากับกี่พิกเซล
1.5 rem เท่ากับ 24 พิกเซลที่ฐานเริ่มต้น 16 พิกเซล ที่ฐาน 10 พิกเซลจะเป็น 15 พิกเซล และที่ฐาน 20 พิกเซลจะเป็น 30 พิกเซล
2 rem และ 0.5 rem เท่ากับกี่พิกเซล
ที่ฐาน 16 พิกเซล 2 rem เท่ากับ 32 พิกเซล และ 0.5 rem เท่ากับ 8 พิกเซล ทั้งสองค่าเปลี่ยนตามฐาน ที่ฐาน 20 พิกเซล 2 rem จะเป็น 40 พิกเซล และ 0.5 rem จะเป็น 10 พิกเซล
rem กับ em ต่างกันอย่างไร
rem คำนวณจากขนาดแบบอักษรขององค์ประกอบ html เสมอ จึงมีค่าเท่ากันทั้งหน้า ส่วน em คำนวณจากขนาดแบบอักษรขององค์ประกอบแม่ ดังนั้น 1.5em ในองค์ประกอบที่มีขนาดแบบอักษร 20 พิกเซลจะเท่ากับ 30 พิกเซล สำหรับ em ให้ใช้ เครื่องมือแปลง em เป็น px
การซูมหน้าเปลี่ยนค่า 1 rem หรือไม่
ในการวัดของเราบน Chrome ค่า 1 rem ยังเป็น 16 พิกเซลหลังซูมหน้าเป็น 125% “การซูมหน้า” ขยายทุกอย่างในหน้าไปพร้อมกัน ทั้งส่วนที่เขียนด้วย rem และส่วนที่เขียนด้วยพิกเซล ส่วนการเปลี่ยนขนาดแบบอักษรจะเปลี่ยนเฉพาะค่า rem
ขนาดแบบอักษรขั้นต่ำเปลี่ยนการคำนวณ rem หรือไม่
ในการวัดของเราบน Chrome และ Firefox ไม่เปลี่ยน เราตั้งขนาดขั้นต่ำไว้ที่ 12 พิกเซลในหน้าที่ใช้ html { font-size: 62.5% } ผลคือ 2.4 rem ยังเท่ากับ 24 พิกเซล แปลว่า rem ยังคำนวณจากฐาน 10 พิกเซล
จะรู้ฐานของเว็บไซต์หนึ่งได้อย่างไร
เปิดเครื่องมือสำหรับนักพัฒนาใน Chrome เลือกองค์ประกอบ html ในแผง “องค์ประกอบ” แล้วเปิดแท็บ “คำนวณแล้ว” และหา font-size ตัวเลขที่เห็นคือฐานที่ใช้คำนวณ rem ในหน้านั้นขณะนี้ หลังจากรวมการตั้งค่าของเว็บไซต์กับการตั้งค่าของผู้อ่านแล้ว
Tailwind CSS ใช้หน่วย rem หรือไม่
ใช้ ขนาดแบบอักษรใน Tailwind CSS เขียนเป็น rem คลาส text-base เท่ากับ 1 rem หรือ 16 พิกเซลที่ฐานเริ่มต้น และคลาส text-2xl เท่ากับ 1.5 rem หรือ 24 พิกเซล
ทำไมผลลัพธ์จึงมีทศนิยม เช่น 17.5 พิกเซล
การคูณด้วยฐานที่ไม่ใช่ 16 อาจได้ทศนิยม เช่น 0.875 rem ที่ฐาน 20 พิกเซลเท่ากับ 17.5 พิกเซล ตัวแปลงแสดงทศนิยมไม่เกินสองตำแหน่ง และเบราว์เซอร์รับเศษของพิกเซลแบบนี้ในหน้าเว็บได้
ช่วยเราปรับปรุงเครื่องมือ
พบค่าที่ให้ผลต่างจากเบราว์เซอร์ของคุณ หรือมีไอเดียสำหรับตัวแปลงนี้ใช่ไหม เขียนถึงเราได้เลย