ข้ามไปยังเนื้อหา
🛠️
Whiz Tools

เครื่องมือแปลงหน่วย PX เป็น REM เป็น EM – เครื่องคำนวณหน่วย CSS ฟรี

แปลงพิกเซลเป็นหน่วย REM และ EM ได้ทันที เครื่องมือแปลงหน่วย CSS สำหรับการออกแบบเว็บแบบ Responsive ที่รองรับขนาดฟอนต์แบบกำหนดเองและคำนวณแบบเรียลไทม์เพื่อผลลัพธ์ที่แม่นยำ

เครื่องมือแปลงหน่วย PX, REM และ EM

แปลงระหว่างหน่วยพิกเซล (PX), รูท เอ็ม (REM) และ เอ็ม (EM) ป้อนค่าในช่องใดก็ได้เพื่อดูค่าเทียบเคียงในหน่วยอื่น

px
px
px
rem
em
ไม่สามารถแสดงภาพสำหรับค่าติดลบหรือศูนย์

สูตรการแปลง

  • PX เป็น REM: ค่าใน px ÷ ขนาดฟอนต์หลัก
  • PX เป็น EM: ค่าใน px ÷ ขนาดฟอนต์องค์ประกอบหลัก
  • REM เป็น PX: ค่าใน rem × ขนาดฟอนต์หลัก
  • EM เป็น PX: ค่าใน em × ขนาดฟอนต์องค์ประกอบหลัก
เครื่องคำนวณโหลด...
📚

เอกสารประกอบการใช้งาน

ตัวแปลงหน่วย PX, REM และ EM: อธิบายหน่วยต่างๆ ใน CSS อย่างละเอียด

ทำไมการแปลงหน่วย CSS จึงสำคัญสำหรับการพัฒนาเว็บสมัยใหม่

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

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

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

ทำความเข้าใจหน่วย CSS: PX, REM และ EM

พิกเซล (PX) คืออะไร?

พิกเซล (PX) เป็นหน่วย CSS ที่ตรงไปตรงมามากที่สุด—สิ่งที่คุณระบุคือสิ่งที่คุณได้รับ พิกเซลใน CSS เป็นหน่วยอ้างอิง ไม่จำเป็นต้องเป็นพิกเซลทางกายภาพของหน้าจอ (โดยเฉพาะบนหน้าจอความละเอียดสูงเช่น Retina) พวกมีขนาดคงที่ที่ไม่เปลี่ยนแปลงตามขนาดฟอนต์หรือองค์ประกอบหลัก

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

เมื่อพิกเซลทำงานได้ดี:

  • เส้นขอบและตัวแบ่ง (เส้นขอบ 1px หรือ 2px คงความคมชัด)
  • รายละเอียดเล็ก ๆ ที่ไม่ควรปรับขนาด
  • คอนเทนเนอร์ความกว้างคงที่เมื่อต้องการขนาดที่แน่นอน
  • ขนาดไอคอนเมื่อทำงานกับสไปรต์ชีตที่ต้องการความแม่นยำระดับพิกเซล

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

REM คืออะไร?

REM (root em) เป็นหน่วยที่ปรับขนาดตามขนาดฟอนต์ขององค์ประกอบราก—ปกติคือองค์ประกอบ <html> เบราว์เซอร์ส่วนใหญ่ค่าเริ่มต้นคือ 16px ดังนั้น 1rem เท่ากับ 16px เว้นแต่คุณจะเปลี่ยนขนาดฟอนต์ราก นี่คือสิ่งที่ทำให้ REM ทรงพลัง: พวกมีการปรับขนาดที่สอดคล้องและคาดเดาได้ทั่วทั้งไซต์

1html {
2  font-size: 16px; /* ค่าเริ่มต้นในเบราว์เซอร์ส่วนใหญ่ */
3}
4
5.element {
6  width: 12.5rem; /* เทียบเท่า 200px ที่ขนาดฟอนต์รากเริ่มต้น */
7  font-size: 1rem; /* เทียบเท่า 16px */
8  margin: 0.625rem; /* เทียบเท่า 10px */
9}
10

เหตุผลที่นักพัฒนาชอบหน่วย REM:

  • การปรับขนาดสอดคล้อง: เปลี่ยนขนาดฟอนต์ราก และทุกอย่างจะปรับขนาดสัดส่วนตามกัน
  • การปฏิบัติตามหลักการเข้าถึง: เมื่อผู้ใช้ปรับขนาดฟอนต์เบราว์เซอร์ เค้าเลย์เอาต์แบบ REM จะปรับตัวโดยอัตโนมัติ
  • การบำรุงรักษาง่าย: อัปเดตค่าระยะห่างในที่เดียว แทนการค้นหาค่าพิกเซลทั่วไป
  • ไม่มีปัญหาการซ้อนทับ: ไม่เหมือน EM หน่วย REM ไม่ทับซ้อนเมื่อองค์ประกอบซ้อนกัน

เคล็ดลับมืออาชีพจากประสบการณ์: ตั้งขนาดฟอนต์รากเป็น 62.5% (ซึ่งทำให้ 1rem = 10px ที่ฐาน 16px) นี่ทำให้การคำนวณทางคณิตศาสตร์ง่ายขึ้น—1.6rem = 16px, 2.4rem = 24px เพียงจำให้ตั้งขนาดฟอนต์ของ body กลับเป็น 1.6rem เพื่อให้ข้อความเริ่มต้นเป็น 16px ตามข้อกำหนด CSS Values and Units ของ W3C หน่วย REM จะอ้างอิงถึงองค์ประกอบรากเสมอ ทำให้คาดเดาได้ในเค้าเลย์เอาต์ที่ซับซ้อน

EM คืออะไร?

หน่วย EM ปรับขนาดสัมพัทธ์กับขนาดฟอนต์ขององค์ประกอบหลัก ทำให้มีความตระหนักถึงบริบท พฤติกรรมนี้แตกต่างจากหน่วย REM ซึ่งอ้างอิงรากเสมอ ชื่อ "em" มาจากการพิมพ์—เดิมทีหมายถึงความกว้างของตัวอักษรตัวใหญ่ "M" ในแบบอักษรที่กำหนด

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* เทียบเท่า 16px (20px × 0.8) */
7  margin: 0.5em; /* เทียบเท่า 8px (16px × 0.5) */
8}
9

เมื่อหน่วย EM โดดเด่น:

  • การออกแบบแบบคอมโพเนนต์: การเติมและระยะห่างที่ปรับขนาดตามฟอนต์
  • การพิมพ์: ความสูงบรรทัดทำงานได้ดีกับค่าที่ไม่มีหน่วยหรือ em (เช่น line-height: 1.5em)
  • โมดูลที่ครอบคลุมตัวเอง: ปุ่มหรือการ์ดที่รักษาสัดส่วนเมื่อขนาดฟอนต์เปลี่ยน
  • มีเดียควอรี: ตามเอกสาร MDN Web Docs หน่วย EM ในมีเดียควอรีอ้างอิงขนาดฟอนต์เริ่มต้นของเบราว์เซอร์ ไม่ใช่องค์ประกอบหลัก

กับดักการซ้อนทับ: นี่คือจุดที่นักพัฒนามักติดกับดัก หน่วย EM จะลดหลั่นผ่านองค์ประกอบที่ซ้อนกัน ซึ่งอาจสร้างผลลัพธ์ที่ไม่คาดคิด:

1.level-1 { font-size: 1.2em; }  /* 19.2px ถ้าหลักเป็น 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

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

สูตรการแปลงและการคำนวณ

ความเข้าใจความสัมพันธ์ทางคณิตศาสตร์ระหว่างหน่วย PX, REM และ EM เป็นสิ่งสำคัญสำหรับการแปลงที่แม่นยำ ต่อไปนี้คือสูตรที่ใช้ในตัวแปลงของเรา:

การแปลง PX เป็น REM

ในการแปลงพิกเซลเป็นหน่วย REM ให้หารค่าพิกเซลด้วยขนาดฟอนต์ราก:

REM=PXrootFontSizeREM = \frac{PX}{rootFontSize}

ตัวอย่าง โดยใช้ขนาดฟอนต์รากเริ่มต้นที่ 16px:

  • 16px = 1rem
  • 24px = 1.5rem
  • 8px = 0.5rem

การแปลง PX เป็น EM

ในการแปลงพิกเซลเป็นหน่วย EM ให้หารค่าพิกเซลด้วยขนาดฟอนต์ของธาตุแม่:

EM=PXparentFontSizeEM = \frac{PX}{parentFontSize}

ตัวอย่าง โดยใช้ขนาดฟอนต์ของธาตุแม่ที่ 16px:

  • 16px = 1em
  • 24px = 1.5em
  • 8px = 0.5em

การแปลง REM เป็น PX

ในการแปลงหน่วย REM เป็นพิกเซล ให้คูณค่า REM กับขนาดฟอนต์ราก:

PX=REM×rootFontSizePX = REM \times rootFontSize

ตัวอย่าง โดยใช้ขนาดฟอนต์รากเริ่มต้นที่ 16px:

  • 1rem = 16px
  • 1.5rem = 24px
  • 0.5rem = 8px

การแปลง EM เป็น PX

ในการแปลงหน่วย EM เป็นพิกเซล ให้คูณค่า EM กับขนาดฟอนต์ของธาตุแม่:

PX=EM×parentFontSizePX = EM \times parentFontSize

ตัวอย่าง โดยใช้ขนาดฟอนต์ของธาตุแม่ที่ 16px:

  • 1em = 16px
  • 1.5em = 24px
  • 0.5em = 8px

การแปลง REM เป็น EM

ในการแปลงหน่วย REM เป็นหน่วย EM ต้องคำนึงถึงทั้งขนาดฟอนต์รากและขนาดฟอนต์ของธาตุแม่:

EM=REM×rootFontSizeparentFontSizeEM = REM \times \frac{rootFontSize}{parentFontSize}

หากทั้งขนาดฟอนต์รากและธาตุแม่เท่ากัน (เช่น 16px) แล้ว 1rem = 1em

การแปลง EM เป็น REM

ในการแปลงหน่วย EM เป็นหน่วย REM ให้ใช้สูตรต่อไปนี้:

REM=EM×parentFontSizerootFontSizeREM = EM \times \frac{parentFontSize}{rootFontSize}

อีกครั้ง หากขนาดฟอนต์ทั้งสองเท่ากัน แล้ว 1em = 1rem

วิธีใช้เครื่องมือแปลงหน่วย PX เป็น REM เป็น EM

การแปลงค่าอย่างแม่นยำทำได้ง่ายด้วยเครื่องมือนี้ กุญแจสำคัญคือการเข้าใจขนาดฟอนต์ที่ใช้สำหรับสถานการณ์เฉพาะของคุณ

คู่มือเริ่มต้นอย่างรวดเร็ว

  1. ป้อนค่าของคุณ ในช่องใดก็ได้—พิกเซล, REM, หรือ EM
  2. ตรวจสอบผลลัพธ์ ทันทีในสองหน่วยอื่น
  3. ปรับขนาดฟอนต์ ให้ตรงกับโปรเจกต์ของคุณ:
    • ขนาดฟอนต์ราก: สิ่งที่คุณตั้งค่าบน <html> (โดยปกติ 16px)
    • ขนาดฟอนต์ของพาเรนต์: ขนาดฟอนต์ของพาเรนต์ของอิลิเมนต์เฉพาะ (โดยปกติ 16px เช่นกัน)
  4. คัดลอกค่า ที่คุณต้องการโดยใช้ปุ่มคัดลอก

รับผลลัพธ์ที่แม่นยำสำหรับโปรเจกต์ของคุณ

เครื่องมือแปลงค่าเริ่มต้นที่ 16px สำหรับทั้งขนาดฟอนต์ราก และพาเรนต์เนื่องจากเป็นมาตรฐานของเบราว์เซอร์ แต่สิ่งที่สำคัญคือ: โปรเจกต์ของคุณอาจใช้ค่าที่แตกต่างกัน

ค้นหาขนาดฟอนต์ราก: เปิดเครื่องมือนักพัฒนาของเบราว์เซอร์ ตรวจสอบอิลิเมนต์ <html> และตรวจสอบขนาดฟอนต์ที่คำนวณ หากคุณตั้งค่า html { font-size: 62.5%; } ขนาดฟอนต์รากของคุณจะเป็น 10px (62.5% ของ 16px)

ค้นหาขนาดฟอนต์พาเรนต์: สำหรับการแปลง EM คุณต้องทราบขนาดฟอนต์ของอิลิเมนต์พาเรนต์เฉพาะที่คุณกำลังใช้สไตล์ ตรวจสอบอิลิเมนต์นั้นในเครื่องมือนักพัฒนาเพื่อดูขนาดฟอนต์ที่คำนวณ หากพาเรนต์มี font-size: 1.2rem และรากของคุณเป็น 16px ให้ตั้งขนาดฟอนต์พาเรนต์เป็น 19.2px เพื่อการคำนวณ EM ที่แม่นยำ

สถานการณ์การแปลงทั่วไป

จากการออกแบบสู่โค้ด: ไฟล์ Figma ของคุณแสดง padding: 24px คุณต้องการใช้หน่วย REM เพื่อการเข้าถึงที่ดีขึ้น ป้อน 24 ในช่อง PX และคุณจะเห็นว่าเท่ากับ 1.5rem (สมมติว่ารากเป็น 16px)

สร้างคอมโพเนนต์ปุ่ม: คุณต้องการให้การเติมพื้นที่ขยายตามขนาดฟอนต์ของปุ่ม หากปุ่มมี font-size: 1.125rem (18px) ให้ตั้งขนาดฟอนต์พาเรนต์เป็น 18 ป้อนการเติมพื้นที่ในพิกเซลที่คุณต้องการ และใช้ค่า EM ที่ได้

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

การแปลงหน่วย CSS ในกรณีใช้งานจริง

การรู้สูตรคือเรื่องหนึ่ง—การนำไปใช้อย่างมีประสิทธิภาพในโค้ดการผลิตคือคนละเรื่อง นี่คือจุดที่การแปลงหน่วยสร้างความแตกต่างที่เป็นรูปธรรมในโปรเจ็คของคุณ

การแปลงไฟล์ดีไซน์เป็น CSS แบบตอบสนอง

คุณได้รับดีไซน์จาก Figma ที่ระบุทุกอย่างด้วยพิกเซล องค์ประกอบการ์ดแสดง:

  • การเติมขอบ: 24px
  • ขนาดฟอนต์หัวเรื่อง: 28px
  • ขนาดฟอนต์เนื้อหา: 16px
  • ระยะห่างด้านล่าง: 40px

การแปลงเป็นหน่วย REM (สมมติฐานราก 16px) ได้ดังนี้:

1.card {
2  padding: 1.5rem;        /* 24px → 1.5rem */
3  margin-bottom: 2.5rem;  /* 40px → 2.5rem */
4}
5
6.card__heading {
7  font-size: 1.75rem;     /* 28px → 1.75rem */
8}
9
10.card__body {
11  font-size: 1rem;        /* 16px → 1rem */
12}
13

ประโยชน์คืออะไร? เมื่อผู้ใช้ที่มีความบกพร่องทางการมองเห็นเพิ่มขนาดฟอนต์เริ่มต้นของเบราว์เซอร์จาก 16px เป็น 20px การ์ดของคุณจะปรับขนาดสัดส่วนตามกัน การเติมขอบ ระยะห่าง และข้อความจะขยายขึ้น 25% โดยรักษาความสมดุลทางภาพ หากใช้ค่าพิกเซล เฉพาะข้อความจะขยาย ทำให้เลย์เอาต์เสีย

[ส่วนที่เหลือของการแปลความจะดำเนินต่อ...]

วิวัฒนาการของหน่วย CSS: จากแบบคงที่สู่แบบยืดหยุ่น

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

ยุคพิกเซลที่สมบูรณ์แบบ (ค.ศ. 1990-2000)

เว็บไซต์ในยุคแรกถูกออกแบบสำหรับความกว้างหน้าจอเฉพาะ—640px จากนั้นก็ 800px แล้วก็ 1024px เค้าโครง CSS ใช้พิกเซลโดยเด็ดขาดเพราะนักออกแบบสิ่งพิมพ์เข้าใจเช่นนั้น ไซต์ดูเหมือนกันทั้งหมดในเบราว์เซอร์ (เมื่อพวกมันทำงาน) แต่แตกหักสนิทบนขนาดหน้าจอที่ไม่คาดคิด เว็บถูกปฏิบัติเหมือนสิ่งพิมพ์: คงที่ ควบคุมได้ และคาดเดาได้

หน่วย EM มีอยู่ในข้อกำหนด CSS ซึ่งสืบทอดมาจากการพิมพ์ แต่นักพัฒนาส่วนใหญ่หลีกเลี่ยง พฤติกรรมการสะสมทำให้สับสน และไม่มีอุปกรณ์มือถือบังคับให้เราคิดอย่างยืดหยุ่น

การปลุกตื่นของมือถือ (ค.ศ. 2007-2010)

ไอโฟนเปลี่ยนทุกอย่าง กะทันหัน มีการเข้าชมจากหน้าจอขนาด 320px เป็นสัดส่วนที่สำคัญ การซูมแบบหนีบช่วยได้ แต่เว็บไซต์ที่ออกแบบสำหรับเดสก์ท็อป 1024px ก็ยังน่าปวดหัวบนมือถือ

บทความของ Ethan Marcotte ปี 2010 เกี่ยวกับการออกแบบเว็บแบบตอบสนอง ทำให้แนวทางใหม่ชัดเจน: กริดแบบไหล่ ภาพที่ยืดหยุ่น และมีเดียควอรี่ หน่วยสัมพัทธ์กลายเป็นสิ่งจำเป็น ไม่ใช่ทางเลือก แต่พฤติกรรมการสืบทอดของ EM ก่อให้เกิดบักในเค้าโครงที่ซับซ้อน

หน่วย REM ช่วยแก้ปัญหา (ค.ศ. 2010-ปัจจุบัน)

CSS3 แนะนำหน่วย REM ราวปี 2010 แก้ปัญหาหลักของ EM: การสะสม REM ให้การปรับขนาดสัมพัทธ์โดยไม่มีความซับซ้อนของการสืบทอด Internet Explorer 9 เพิ่มการสนับสนุนในปี 2011 และภายในปี 2015 หน่วย REM กลายเป็นกระแสหลัก

ในปัจจุบัน แนวปฏิบัติที่ดีที่สุดผสมผสานหน่วยอย่างมียุทธศาสตร์ REM สำหรับการพิมพ์และระยะห่าง EM สำหรับสัดส่วนภายในส่วนประกอบ พิกเซลสำหรับรายละเอียดที่ละเอียด ฟังก์ชัน CSS สมัยใหม่เช่น clamp() ผสมผสานหน่วยเหล่านี้อย่างพลวัต สร้างเค้าโครงที่ปรับตัวเข้ากับบริบทใดๆ

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

ตัวอย่างโค้ดสำหรับการแปลงหน่วย

ฟังก์ชันการแปลงหน่วยใน JavaScript

1// แปลงระหว่างหน่วย PX, REM และ EM
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// ตัวอย่างการใช้งาน
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

คุณสมบัติ CSS แบบกำหนดเองสำหรับการแปลงหน่วย

1:root {
2  /* ขนาดฟอนต์พื้นฐาน */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* ค่าพิกเซลทั่วไปที่แปลงเป็น REM */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* มาตราส่วนการพิมพ์ */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* ตัวอย่างการใช้งาน */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

มิกซิน SCSS สำหรับการแปลงหน่วย

1// ฟังก์ชัน SCSS สำหรับการแปลงหน่วย
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// ตัวอย่างการใช้งาน
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // ใช้ขนาดฟอนต์ของพ่อ (18px) สำหรับการแปลง em
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

ตัวแปลงหน่วยใน Python

1def px_to_rem(px, root_font_size=16):
2    """แปลงพิกเซลเป็นหน่วย REM"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """แปลงหน่วย REM เป็นพิกเซล"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """แปลงพิกเซลเป็นหน่วย EM"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """แปลงหน่วย EM เป็นพิกเซล"""
15    return em * parent_font_size
16
17# ตัวอย่างการใช้งาน
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

ข้อผิดพลาดทั่วไปเมื่อแปลงหน่วย CSS

หลังจากตรวจสอบโค้ดเบสหลายร้อยชุด ฉันสังเกตเห็นข้อผิดพลาดเหล่านี้เกิดขึ้นซ้ำ ๆ การหลีกเลี่ยงพวกมันจะช่วยประหยัดเวลาในการแก้จุดบกพร่อง

ข้อผิดพลาดที่ 1: ไม่คำนึงถึงขนาดฟอนต์รากที่กำหนดเอง

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

วิธีแก้: ตรวจสอบขนาดฟอนต์รากที่แท้จริงของโปรเจ็กต์เสมอก่อนทำการแปลง ตั้งค่าขนาดฟอนต์รากของตัวแปลงให้ตรงกับความเป็นจริงของโปรเจ็กต์

ข้อผิดพลาดที่ 2: การใช้หน่วย EM สำหรับการพิมพ์ในคอมโพเนนต์ที่ซ้อนกัน

ปัญหา: คุณสร้างคอมโพเนนต์การ์ดด้วย font-size: 1.2em สำหรับส่วนหัว ใช้งานได้ดี จากนั้นคุณวางการ์ดไว้ในการ์ดอื่น และทันใดนั้นส่วนหัวของการ์ดภายในกลายเป็น 1.44em (1.2 × 1.2) แทน 1.2em

วิธีแก้: ใช้หน่วย REM สำหรับการพิมพ์เว้นแต่คุณต้องการพฤติกรรมการซ้อนกัน สงวนหน่วย EM สำหรับระยะห่างที่ควรปรับขนาดตามขนาดฟอนต์ท้องถิ่น

ข้อผิดพลาดที่ 3: การแปลงความกว้างเส้นขอบเป็น REM

ปัญหา: คุณแปลง border: 1px เป็น border: 0.0625rem เพื่อความสอดคล้อง เมื่อผู้ใช้ซูมหรือเปลี่ยนขนาดฟอนต์ เส้นขอบของคุณจะดูหนาและไม่สวยงาม

วิธีแก้: คงเส้นขอบไว้ในพิกเซล เส้นขอบที่เล็กกว่าพิกเซล (0.5px) มีการรองรับที่ไม่สอดคล้องกันในเบราว์เซอร์ และเส้นขอบไม่จำเป็นต้องปรับขนาดตามข้อความ

ข้อผิดพลาดที่ 4: ลืมว่าหน่วยในมีเดียคิวรีอ้างอิงการตั้งค่าของผู้ใช้

ปัญหา: คุณเขียน @media (min-width: 768px) สำหรับจุดแบ่งแท็บเล็ต ผู้ใช้ที่ตั้งขนาดฟอนต์เริ่มต้นใหญ่ขึ้นจะไม่ได้รับเลย์เอาต์แท็บเล็ตเมื่อควรจะได้

วิธีแก้: ใช้หน่วย EM หรือ REM ในมีเดียคิวรี: @media (min-width: 48em) นี่จะเคารพการตั้งค่าฟอนต์ของผู้ใช้ ตามที่แนะนำในเอกสาร MDN เกี่ยวกับการออกแบบที่ตอบสนอง

ข้อผิดพลาดที่ 5: การผสมวิธีการคำนวณ

ปัญหา: Sass ของคุณใช้วิธีการคำนวณหนึ่ง JavaScript ใช้อีกวิธีหนึ่ง และการคำนวณในใจของคุณใช้วิธีที่สาม ผลลัพธ์ไม่ตรงกัน ทำให้เกิดความยุ่งยากในการปรับแต่ง

วิธีแก้: ใช้ตัวแปลงนี้เป็นแหล่งข้อมูลที่เชื่อถือได้ ทำบุ๊กมาร์กไว้ อ้างอิงระหว่างการตรวจสอบโค้ด และตรวจสอบให้แน่ใจว่าทุกคนในทีมใช้วิธีการแปลงเดียวกัน

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

อะไรคือความแตกต่างระหว่างหน่วย REM และ EM?

จุดอ้างอิงแตกต่างกันโดยสิ้นเชิง หน่วย REM จะดูที่ขนาดฟอนต์ของ <html> เสมอ—ไม่ว่าองค์ประกอบจะซ้อนกันลึกเพียงใด 1rem จะเท่ากับค่าที่คำนวณได้เหมือนเดิม หน่วย EM จะดูที่ขนาดฟอนต์ขององค์ประกอบแม่ทันที ซึ่งสร้างผลกระทบแบบลูกโซ่

คิดแบบนี้: หากคุณซ้อน <div> สามชั้น แต่ละชั้นมี font-size: 1.2em ข้อความใน div ชั้นในสุดจะมีขนาดใหญ่กว่าที่คาดไว้เพราะแต่ละระดับคูณทับกัน ด้วย font-size: 1.2rem ที่แต่ละระดับ div ทั้งสามจะมีขนาดฟอนต์เหมือนกันเพราะอ้างอิงจากราก

นี่คือเหตุผลที่ REM เป็นที่นิยมสำหรับการจัดพิมพ์เมื่อการสนับสนุนของเบราว์เซอร์ดีขึ้น—มันขจัดภาระทางความคิดในการติดตามห่วงโซ่การสืบทอด

หน่วย CSS แบบใดดีที่สุดสำหรับการออกแบบเว็บแบบตอบสนอง?

ไม่มีหน่วยเดียวที่ชนะในทุกสถานการณ์ การออกแบบที่ตอบสนองที่ดีที่สุดจะผสมผสานหน่วยอย่างมียุทธศาสตร์:

ใช้ REM สำหรับ: ระยะห่างทั่วไป มาตราส่วนการพิมพ์ ช่องว่างขององค์ประกอบ และการวัดใดๆ ที่ควรปรับขนาดตามการตั้งค่าฟอนต์ของผู้ใช้

ใช้ EM สำหรับ: ระยะห่างภายในองค์ประกอบ (การเติมปุ่ม ช่องว่างการ์ด) มีเดียควอรี (เคารพการตั้งค่าของผู้ใช้) และองค์ประกอบที่ควรปรับขนาดตามบริบทเฉพาะ

ใช้พิกเซลสำหรับ: เส้นขอบ 1px (ดูคมชัด) เงาของกล่อง (เงาที่ละเอียดต้องการความแม่นยำ) และความกว้างเส้นของ SVG

ใช้เปอร์เซ็นต์หรือหน่วยวิวพอร์ตสำหรับ: ความกว้างคอนเทนเนอร์ ส่วนที่มีความสูงเต็ม

ฉันเคยเห็นฐานโค้ดที่พยายามใช้หน่วยเดียวทั่วทั้งหน้า—มันสร้างปัญหาในการบำรุงรักษาเสมอ ใช้แต่ละหน่วยที่ให้ประโยชน์มากที่สุด

[การแปลต่อเนื่อง...]

การอ้างอิงและการอ่านเพิ่มเติม

  1. "โมดูลค่าและหน่วย CSS ระดับ 3" คำแนะนำของ W3C https://www.w3.org/TR/css-values-3/

  2. มาร์กอตต์, เอแธน "การออกแบบเว็บแบบตอบสนอง" A List Apart, 25 พฤษภาคม 2553 https://alistapart.com/article/responsive-web-design/

  3. รัตเตอร์, ริชาร์ด "องค์ประกอบของรูปแบบตัวอักษรที่ใช้กับเว็บ" http://webtypography.net/

  4. "หน่วย CSS" เอกสาร MDN Web https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

  5. "พิกเซล CSS กับพิกเซลทางกายภาพ" เอกสาร Stack Overflow https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels

  6. โคเยอร์, คริส "ความยาวของ CSS" CSS-Tricks https://css-tricks.com/the-lengths-of-css/

  7. "การใช้คุณสมบัติ CSS แบบกำหนดเอง (ตัวแปร)" เอกสาร MDN Web https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  8. "ทำความเข้าใจและใช้หน่วย rem ใน CSS" SitePoint https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

เริ่มแปลงหน่วย CSS อย่างถูกต้อง

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

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

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

สูตรคำนวณอ้างอิงจากข้อกำหนดโมดูลค่าและหน่วย CSS ของ W3C เพื่อให้มั่นใจว่าการแปลงสอดคล้องกับวิธีที่เบราว์เซอร์คำนวณค่าเหล่านี้จริง