แปลงพิกเซล (px) เป็น rem
ที่ฐานเริ่มต้น 16 พิกเซล 24 px เท่ากับ 1.5 rem และ 14 px เท่ากับ 0.875 rem การคำนวณมีเพียงการหารครั้งเดียว คือขนาดเป็นพิกเซลหารด้วยขนาดแบบอักษรพื้นฐานของหน้า ใส่ขนาดจากงานออกแบบในช่องแรก และถ้าหน้าของคุณใช้ฐานอื่น ให้พิมพ์ฐานนั้นในช่อง font-size พื้นฐาน
rem คืออะไร และทำไมขนาดเป็นพิกเซลจึงเขียนด้วย rem
ไฟล์งานออกแบบให้ขนาดเป็นพิกเซล เช่น หัวเรื่อง 28 พิกเซล หรือระยะห่างระหว่างสองส่วน 32 พิกเซล พิกเซลใน CSS เป็นหน่วยคงที่ ซึ่งมาตรฐานกำหนดไว้ที่ 1/96 นิ้ว[1] เครื่องมือแปลง px เป็นนิ้ว จึงนับ 96 พิกเซลในหนึ่งนิ้วที่ความละเอียดเริ่มต้น ส่วน rem เป็นหน่วยสัมพัทธ์ หนึ่ง rem เท่ากับขนาดแบบอักษรที่คำนวณแล้วขององค์ประกอบ html ซึ่งเป็นองค์ประกอบรากของหน้า[1]
เพราะ rem คำนวณจากองค์ประกอบรากเสมอ ค่าจึงไม่ทบกันในองค์ประกอบที่ซ้อนกันแบบ em ซึ่งแปลงได้ด้วย เครื่องมือแปลง em เป็น px การแปลงขนาดใดก็ได้จากพิกเซลเป็น rem จึงต้องรู้เพียงขนาดแบบอักษรขององค์ประกอบ html หลังแปลงแล้ว ขนาดจะเปลี่ยนตามการตั้งค่าของผู้อ่าน หัวเรื่อง 24 พิกเซลยังเป็น 24 พิกเซลที่ค่าเริ่มต้น และกลายเป็น 30 พิกเซลสำหรับผู้อ่านที่เลือก “ขนาดใหญ่” ใน Chrome หรือ “ขนาดแบบอักษรใหญ่” ใน Edge
60px ในกฎ .hero และ 220px ในกฎที่รวมคลาส .heading กับ .sub-heading ที่ฐาน 16 พิกเซล ค่าแรกจะเป็น 3.75rem และค่าที่สองจะเป็น 13.75rem จากนั้นทั้งสองจะขยายตามการตั้งค่าของผู้อ่าน ภาพถ่าย: Ferenc Almasi, Unsplash24 px เท่ากับกี่ rem
24 พิกเซลเท่ากับ 1.5 rem ที่ฐานเริ่มต้น 16 พิกเซล สูตรมีเพียงการหารครั้งเดียว คือ rem = พิกเซล ÷ ขนาดแบบอักษรพื้นฐาน ทุก 16 พิกเซลเท่ากับ 1 rem และหนึ่งพิกเซลเท่ากับ 0.0625 rem ดังนั้น 8 พิกเซลเท่ากับ 0.5 rem ส่วน 32 พิกเซลเท่ากับ 2 rem
ถ้าสไตล์ชีตใช้ฐานอื่น ให้หารด้วยฐานนั้น เทคนิค 62.5% ทำให้ฐานเป็น 10 พิกเซล 24 พิกเซลจึงเท่ากับ 2.4 rem ที่ฐาน 20 พิกเซล 24 พิกเซลเท่ากับ 1.2 rem ใส่ฐานในช่องที่สาม แล้วตัวแปลงจะให้ค่าที่พร้อมเขียนในสไตล์ชีต
บางขนาดหารด้วย 16 ไม่ลงตัว ผลลัพธ์จึงแสดงทศนิยมไม่เกินสี่ตำแหน่ง เช่น 13 พิกเซลเท่ากับ 0.8125 rem และ CSS รับตัวเลขนี้ได้ตามที่เป็น ปุ่ม “คัดลอกผลลัพธ์” คัดลอกเฉพาะตัวเลข จึงวางในสไตล์ชีตแล้วเติมคำว่า rem ต่อท้ายได้ทันที
แปลงพิกเซลเป็น rem ด้วยสูตรอะไร
สูตรคือ rem = px ÷ font-size โดย font-size คือขนาดแบบอักษรขององค์ประกอบ html ลองดูหัวเรื่องขนาด 28 พิกเซลจากงานออกแบบ ที่ฐาน 16 พิกเซลจะได้ 28 ÷ 16 = 1.75 จึงเขียนในสไตล์ชีตว่า font-size: 1.75rem
ขนาดที่หารด้วย 4 ลงตัวจะได้ค่าที่มีทศนิยมไม่เกินสองตำแหน่ง เช่น 12 พิกเซลเท่ากับ 0.75 rem ขนาดที่เป็นเลขคู่อื่น ๆ จะได้ทศนิยมสามตำแหน่ง เช่น 14 พิกเซลเท่ากับ 0.875 rem และขนาดที่เป็นเลขคี่จะได้ทศนิยมสี่ตำแหน่ง เช่น 15 พิกเซลเท่ากับ 0.9375 rem ส่วนขนาดอย่าง 13.5 พิกเซลจะมีทศนิยมตำแหน่งที่ห้า ผลจึงถูกปัดเศษเหลือสี่ตำแหน่งเป็น 0.8438 rem
ทิศทางกลับให้ใช้ เครื่องมือแปลง rem เป็น px ถ้าต้องการค่าที่สัมพันธ์กับขนาดแบบอักษรขององค์ประกอบแม่ ให้แปลงด้วย เครื่องมือแปลง px เป็น em และถ้าขนาดในไฟล์เป็นพอยต์ (pt) ให้แปลงเป็นพิกเซลก่อนด้วย เครื่องมือแปลง pt เป็น px
font-size:13px จะเป็น 0.8125rem และ margin:16px 0 20px จะเป็น 1rem 0 1.25rem ภาพถ่าย: Rahul Mishra, Unsplashตารางแปลง px เป็น rem ที่ฐานสามค่า
| ขนาดเป็นพิกเซล | rem ที่ฐาน 16 px | rem ที่ฐาน 10 px | rem ที่ฐาน 20 px |
|---|---|---|---|
| 1 px | 0.0625 rem | 0.1 rem | 0.05 rem |
| 2 px | 0.125 rem | 0.2 rem | 0.1 rem |
| 4 px | 0.25 rem | 0.4 rem | 0.2 rem |
| 6 px | 0.375 rem | 0.6 rem | 0.3 rem |
| 8 px | 0.5 rem | 0.8 rem | 0.4 rem |
| 10 px | 0.625 rem | 1 rem | 0.5 rem |
| 11 px | 0.6875 rem | 1.1 rem | 0.55 rem |
| 12 px | 0.75 rem | 1.2 rem | 0.6 rem |
| 13 px | 0.8125 rem | 1.3 rem | 0.65 rem |
| 14 px | 0.875 rem | 1.4 rem | 0.7 rem |
| 15 px | 0.9375 rem | 1.5 rem | 0.75 rem |
| 16 px | 1 rem | 1.6 rem | 0.8 rem |
| 17 px | 1.0625 rem | 1.7 rem | 0.85 rem |
| 18 px | 1.125 rem | 1.8 rem | 0.9 rem |
| 20 px | 1.25 rem | 2 rem | 1 rem |
| 22 px | 1.375 rem | 2.2 rem | 1.1 rem |
| 24 px | 1.5 rem | 2.4 rem | 1.2 rem |
| 25 px | 1.5625 rem | 2.5 rem | 1.25 rem |
| 26 px | 1.625 rem | 2.6 rem | 1.3 rem |
| 28 px | 1.75 rem | 2.8 rem | 1.4 rem |
| 30 px | 1.875 rem | 3 rem | 1.5 rem |
| 32 px | 2 rem | 3.2 rem | 1.6 rem |
| 36 px | 2.25 rem | 3.6 rem | 1.8 rem |
| 40 px | 2.5 rem | 4 rem | 2 rem |
| 44 px | 2.75 rem | 4.4 rem | 2.2 rem |
| 48 px | 3 rem | 4.8 rem | 2.4 rem |
| 50 px | 3.125 rem | 5 rem | 2.5 rem |
| 56 px | 3.5 rem | 5.6 rem | 2.8 rem |
| 60 px | 3.75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6.4 rem | 3.2 rem |
| 72 px | 4.5 rem | 7.2 rem | 3.6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9.6 rem | 4.8 rem |
| 100 px | 6.25 rem | 10 rem | 5 rem |
| 120 px | 7.5 rem | 12 rem | 6 rem |
| 128 px | 8 rem | 12.8 rem | 6.4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19.2 rem | 9.6 rem |
| 200 px | 12.5 rem | 20 rem | 10 rem |
| 256 px | 16 rem | 25.6 rem | 12.8 rem |
| 320 px | 20 rem | 32 rem | 16 rem |
| 400 px | 25 rem | 40 rem | 20 rem |
บรรทัดจากสไตล์ชีตเขียนเป็น rem อย่างไร
| บรรทัดเป็นพิกเซล | rem ที่ฐาน 16 px | rem ที่ฐาน 10 px (62.5%) |
|---|---|---|
| font-size: 16px | 1rem | 1.6rem |
| font-size: 14px | 0.875rem | 1.4rem |
| font-size: 28px | 1.75rem | 2.8rem |
| padding: 12px 24px | 0.75rem 1.5rem | 1.2rem 2.4rem |
| margin-bottom: 32px | 2rem | 3.2rem |
| border-radius: 8px | 0.5rem | 0.8rem |
| max-width: 1200px | 75rem | 120rem |
| @media (min-width: 768px) | 48rem | 48rem |
@media (min-width: 48rem) เริ่มทำงานที่ความกว้าง 768 พิกเซล และเมื่อเพิ่มขนาดแบบอักษรของเบราว์เซอร์เป็น 20 พิกเซล กฎเดียวกันเริ่มทำงานที่ความกว้าง 960 พิกเซลตัวแปลง px เป็น rem รับและคำนวณการเขียนแบบใดบ้าง
| สิ่งที่พิมพ์หรือวาง | ผลที่ตัวแปลงคำนวณ | สิ่งที่เกิดขึ้นกับการเขียนนี้ |
|---|---|---|
| ช่องแรก: ขนาดเป็นพิกเซล ที่ฐาน 16 พิกเซล | ||
| 24 | 1.5 rem | ตัวเลขอย่างเดียว แบบที่ขนาดแสดงในแผงวัดของโปรแกรมออกแบบ |
| 24px | 1.5 rem | หน่วยติดกับตัวเลข เราอ่านตัวเลขและข้าม px |
| 24 พิกเซล | 1.5 rem | หน่วยเขียนเป็นภาษาไทยหลังช่องว่าง เราใช้ตัวเลขและข้ามคำ |
| ๒๔ | 1.5 rem | เลขไทย เราแปลงเป็น 24 ก่อนคำนวณ |
| 13.5 | 0.8438 rem | ขนาดที่มีทศนิยม ผลแสดงทศนิยมสี่ตำแหน่งหลังปัดเศษ |
| 1,200 | 75 rem | จุลภาคที่ตามด้วยเลขสามหลักพอดีเป็นตัวคั่นหลักพันแบบที่ใช้ในภาษาไทย ขนาดจึงเป็นหนึ่งพันสองร้อยพิกเซล ใต้ช่องจะมีคำแนะนำบอกอีกความหมายหนึ่ง คือ 1.2 |
| 1.200 | 0.075 rem | จุดในหน้านี้เราอ่านเป็นจุดทศนิยม แม้จะตามด้วยเลขสามหลัก ขนาดจึงเป็น 1.2 พิกเซล และใต้ช่องจะมีคำแนะนำ ถ้าต้องการหนึ่งพันสองร้อยให้เขียน 1200 หรือ 1,200 |
| padding: 20px; | 1.25 rem | บรรทัดเต็มจากสไตล์ชีต เราใช้ตัวเลขและข้ามชื่อพร็อพเพอร์ตีกับเครื่องหมายอัฒภาค |
| −8px | -0.5 rem | เครื่องหมายลบแบบตัวพิมพ์ “−” หน้าตัวเลข เราอ่านเป็นค่าติดลบ แบบระยะขอบติดลบ |
| ช่อง “font-size พื้นฐาน”: ตัวแปลงคำนวณฐาน | ||
| 62.5% | 10 px | เปอร์เซ็นต์แบบที่เขียนให้องค์ประกอบ html โดย 62.5% ของฐานเริ่มต้น 16 พิกเซลคือ 10 |
| font-size: 18px | 18 px | บรรทัดที่คัดลอกจากสไตล์ชีต เราใช้ 18 เป็นฐาน |
| ๑๖ | 16 px | ฐานที่เขียนด้วยเลขไทย |
แปลงขนาดจาก Figma หรือทั้งสไตล์ชีตจาก px เป็น rem อย่างไร
ถ้ามีไม่กี่ขนาด ใช้ตัวแปลงก็เพียงพอ แต่ถ้ามีหลายขนาด โปรแกรมออกแบบและเครื่องมือ build สามารถคำนวณ rem เองได้
ขนาดจากไฟล์งานออกแบบ
คัดลอกขนาดเป็นพิกเซลจากแผงวัด แล้ววางในช่องแรก ถ้าหน้ากำหนดขนาดแบบอักษรให้องค์ประกอบ html ให้ใส่ขนาดนั้นในช่อง font-size พื้นฐานก่อนคัดลอกผลลัพธ์Dev Mode ใน Figma
ในแพ็กเกจแบบชำระเงิน Dev Mode แสดงขนาดเป็น rem ได้โดยตรง ชื่อในที่นี้เป็นภาษาอังกฤษตามหน้าจอของ Figma ในส่วน Code ของแผง Inspect ให้คลิก Inspect settings ข้างเมนูภาษาแล้วเลือกหน่วย rem ถ้าต้องการเปลี่ยนฐาน ให้เลือก Set unit scale… จากที่เดียวกัน และใส่ฐานในหน้าต่าง Unit scaleฟังก์ชันใน Sass
Sass หารตัวเลขด้วยฟังก์ชันmath.div()จากโมดูลsass:math[3] ฟังก์ชัน@function rem($px) { @return math.div($px, 16px) * 1rem; }ทำให้rem(24px)เท่ากับ1.5remPostCSS สำหรับทั้งสไตล์ชีต
ปลั๊กอิน postcss-pxtorem แปลง px เป็น rem ในไฟล์ CSS ระหว่าง build[4] ฐานเริ่มต้นคือ 16 และด้วยการตั้งค่าเริ่มต้นจะแปลงเฉพาะพร็อพเพอร์ตีของแบบอักษร คือ font, font-size, line-height และ letter-spacing ส่วน media query ยังคงเป็นพิกเซล
พิกเซล: แปลงเป็นหน่วยอื่น
แหล่งอ้างอิง
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 — W3C
- sass:math — Sass
- postcss-pxtorem — GitHub
- <length> CSS type — MDN Web Docs
- แนวทางการทำให้เนื้อหาเว็บสามารถเข้าถึงและใช้ประโยชน์ได้ (WCAG) 2.2 — W3C, ฉบับแปลภาษาไทยโดย สวทช.
เราคำนวณค่าทั้งหมดในตารางจากนิยามของหน่วย และตรวจสอบการคำนวณอีกครั้งก่อนเผยแพร่ ข้อมูลทางประวัติศาสตร์และชื่อหน่วยท้องถิ่นอ้างอิงจากแหล่งที่ระบุไว้ด้านบน
ตรวจสอบเนื้อหาล่าสุด: · เขียนและตรวจสอบโดย ทีมงาน Arteon
คำถามที่พบบ่อยเกี่ยวกับการแปลง px เป็น rem
16 px เท่ากับกี่ rem
16 พิกเซลเท่ากับ 1 rem ที่ฐานเริ่มต้น 16 พิกเซล ส่วนเทคนิค 62.5% หรือที่ฐาน 10 พิกเซล จะเท่ากับ 1.6 rem
14 px และ 12 px เท่ากับกี่ rem
ที่ฐาน 16 พิกเซล 14 พิกเซลเท่ากับ 0.875 rem และ 12 พิกเซลเท่ากับ 0.75 rem
24 พิกเซลเท่ากับ 1.5 rem เสมอหรือไม่
เป็นเช่นนั้นเฉพาะที่ฐาน 16 พิกเซล ถ้าหน้ากำหนดขนาดอื่นให้องค์ประกอบ html ให้หารด้วยขนาดนั้น ที่ฐาน 10 พิกเซล 24 พิกเซลเท่ากับ 2.4 rem และที่ฐาน 20 พิกเซลเท่ากับ 1.2 rem
ทำไมต้องหารด้วย 16
เพราะ 16 พิกเซลเป็นขนาดแบบอักษรเริ่มต้นที่พบบ่อยในเบราว์เซอร์ และผู้ใช้เปลี่ยนเองได้ในการตั้งค่า[5] ในการวัดของเรา Chrome, Edge และ Firefox ใช้ขนาดนี้ก่อนมีการเปลี่ยนการตั้งค่า
เทคนิค 62.5% เปลี่ยนค่า rem ใน media query หรือไม่
ไม่เปลี่ยน กฎ @media (min-width: 48rem) เริ่มทำงานที่ 768 พิกเซลทั้งแบบใช้และไม่ใช้เทคนิคนี้ เพราะ rem ใน media query คำนวณจากค่าเริ่มต้นของขนาดแบบอักษร[2] จึงควรแปลงขอบเขตของ media query โดยหารด้วย 16
การแปลง px เป็น rem กับการแปลงเป็น em ต่างกันอย่างไร
rem คำนวณจากขนาดแบบอักษรขององค์ประกอบ html จึงหารด้วยฐานเดียวกันทั้งหน้า ส่วน em คำนวณจากขนาดแบบอักษรขององค์ประกอบแม่ จึงหารด้วยขนาดขององค์ประกอบแม่ การคำนวณนี้ใช้ เครื่องมือแปลง px เป็น em ได้
เส้นขอบ 1px ควรเขียนเป็น rem หรือไม่
ถ้าต้องการให้เส้นขอบหนาหนึ่งพิกเซลในทุกการตั้งค่า ให้คงไว้เป็น 1px ถ้าเขียนเป็น 0.0625rem ผู้อ่านที่เลือกฐาน 20 จะเห็นเส้นหนา 1.25 พิกเซล ปลั๊กอิน postcss-pxtorem ก็คงพร็อพเพอร์ตี border ไว้เป็นพิกเซลในการตั้งค่าเริ่มต้น[4]
ข้อความที่เขียนด้วย rem ขยายตามการตั้งค่าของผู้อ่านหรือไม่
ขยาย ข้อความที่เขียนด้วย rem ใหญ่ขึ้นตามขนาดแบบอักษรที่ผู้อ่านเลือกในเบราว์เซอร์ ส่วนข้อความที่เขียนด้วยพิกเซลจะคงเดิม เกณฑ์ความสำเร็จ 1.4.4 “การปรับขนาดข้อความ” ของ WCAG ครอบคลุมเรื่องนี้ คือปรับขนาดข้อความได้สูงสุดถึงร้อยละ 200 โดยไม่สูญเสียเนื้อหาหรือฟังก์ชันการใช้งาน[6]
ช่วยเราปรับปรุงเครื่องมือ
พบขนาดที่ให้ผลต่างจากเบราว์เซอร์ของคุณ หรือมีไอเดียสำหรับตัวแปลงนี้ใช่ไหม เขียนถึงเราได้เลย