🛠️

Whiz Tools

Build • Create • Innovate

เครื่องคำนวณ PX เป็น REM เป็น EM: เครื่องคำนวณหน่วย CSS

แปลงระหว่างพิกเซล (PX), root em (REM) และ em (EM) หน่วย CSS ด้วยเครื่องคำนวณง่ายๆ นี้ จำเป็นสำหรับการออกแบบและพัฒนาเว็บที่ตอบสนอง

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

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

px
px
Enter a value in px units
px
Enter a value in rem units
rem
Enter a value in em units
em
การแสดงภาพไม่สามารถใช้ได้สำหรับค่าติดลบหรือศูนย์

สูตรการแปลง

  • PX เป็น REM: ค่าที่เป็น px ÷ ขนาดฟอนต์ราก
  • PX เป็น EM: ค่าที่เป็น px ÷ ขนาดฟอนต์ขององค์ประกอบแม่
  • REM เป็น PX: ค่าที่เป็น rem × ขนาดฟอนต์ราก
  • EM เป็น PX: ค่าที่เป็น em × ขนาดฟอนต์ขององค์ประกอบแม่
📚

เอกสารประกอบ

PX, REM, และ EM หน่วยแปลง: อธิบายหน่วย CSS ที่สำคัญ

บทนำสู่การแปลงหน่วย CSS

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

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

การเข้าใจหน่วย CSS: PX, REM, และ EM

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

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

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

ลักษณะสำคัญของพิกเซล:

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

หน่วย REM คืออะไร?

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

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:

  • ปรับขนาดตามขนาดฟอนต์ขององค์ประกอบรูท
  • รักษาสัดส่วนที่สม่ำเสมอตลอดเอกสาร
  • สนับสนุนการเข้าถึงที่ดีกว่าผ่านการปรับขนาดฟอนต์ทั่วโลก
  • เหมาะสำหรับเลย์เอาต์และการพิมพ์ที่ตอบสนอง

หน่วย EM คืออะไร?

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

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:

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

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

การเข้าใจความสัมพันธ์ทางคณิตศาสตร์ระหว่างหน่วย 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

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

การใช้งานพื้นฐาน

  1. ป้อนค่าในช่องข้อมูลใด ๆ (PX, REM, หรือ EM)
  2. เครื่องมือแปลงจะ คำนวณโดยอัตโนมัติ และแสดงค่าที่เทียบเท่าในอีกสองหน่วย
  3. ปรับขนาดฟอนต์รูท (ค่าเริ่มต้น: 16px) เพื่อดูว่ามันมีผลต่อการแปลง REM อย่างไร
  4. ปรับขนาดฟอนต์ขององค์ประกอบแม่ (ค่าเริ่มต้น: 16px) เพื่อดูว่ามันมีผลต่อการแปลง EM อย่างไร
  5. ใช้ปุ่ม คัดลอก ข้างแต่ละช่องเพื่อคัดลอกค่าลงในคลิปบอร์ดของคุณ

ฟีเจอร์ขั้นสูง

  • การเปรียบเทียบทางสายตา: เครื่องมือให้การแสดงภาพที่เป็นตัวแทนของขนาดสัมพัทธ์ของแต่ละหน่วย
  • การควบคุมความแม่นยำ: การคำนวณทั้งหมดรักษา 4 หลักทศนิยมเพื่อความแม่นยำ
  • ค่าลบ: เครื่องมือแปลงรองรับค่าลบ ซึ่งเป็นค่าที่ถูกต้องใน CSS สำหรับคุณสมบัติต่าง ๆ เช่น ขอบ
  • การอัปเดตแบบเรียลไทม์: การเปลี่ยนแปลงใด ๆ ในค่าข้อมูลหรือการตั้งค่าฟอนต์จะอัปเดตการคำนวณทั้งหมดทันที

เคล็ดลับสำหรับการแปลงที่แม่นยำ

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

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

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

การออกแบบเว็บที่ตอบสนอง

การแปลงระหว่างหน่วยเป็นสิ่งสำคัญสำหรับการสร้างการออกแบบที่ตอบสนองได้จริง:

  • แนวทางการออกแบบสำหรับมือถือ: เริ่มต้นด้วยการออกแบบพื้นฐานในพิกเซล จากนั้นแปลงเป็นหน่วยสัมพัทธ์เพื่อความสามารถในการปรับขนาด
  • การจัดการจุดตัด: ใช้ REM สำหรับการจัดระยะห่างที่สม่ำเสมอข้ามขนาดหน้าจอที่แตกต่างกัน
  • การปรับขนาดส่วนประกอบ: ตรวจสอบให้แน่ใจว่า UI รักษาความสัมพันธ์เชิงสัดส่วนเมื่อหน้าจอเปลี่ยน
1/* แปลงค่าพิกเซลคงที่เป็นหน่วย REM ที่ตอบสนองได้ */
2.container {
3  /* จาก: padding: 20px; */
4  padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5  
6  /* จาก: margin-bottom: 32px; */
7  margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9

การปรับปรุงการเข้าถึง

การใช้หน่วยสัมพัทธ์ช่วยปรับปรุงการเข้าถึงโดยการเคารพความชอบของผู้ใช้:

  • การปรับขนาดข้อความ: เมื่อผู้ใช้เปลี่ยนขนาดฟอนต์ของเบราว์เซอร์ หน้าตาแบบ REM จะปรับตัวตาม
  • ฟังก์ชันการซูม: หน่วยสัมพัทธ์ช่วยให้การออกแบบยังคงสัดส่วนเมื่อผู้ใช้ซูมเข้า
  • การเคารพความชอบของผู้ใช้: เลย์เอาต์ที่ใช้หน่วยสัมพัทธ์ให้เกียรติการตั้งค่าขนาดฟอนต์เริ่มต้นของผู้ใช้

ระบบการออกแบบที่ใช้ส่วนประกอบ

ระบบการออกแบบสมัยใหม่ได้รับประโยชน์จากการใช้หน่วยอย่างรอบคอบ:

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

ระบบการพิมพ์

การสร้างการพิมพ์ที่กลมกลืนต้องการการเลือกหน่วยที่รอบคอบ:

  • สเกลฟอนต์: กำหนดสเกลการพิมพ์ใน REM สำหรับความก้าวหน้าที่สม่ำเสมอ
  • ความสูงของบรรทัด: ใช้ค่าที่ไม่มีหน่วยหรือ EM สำหรับความสูงของบรรทัดที่เป็นสัดส่วน
  • ข้อความที่ตอบสนอง: ปรับขนาดฟอนต์ข้ามจุดตัดในขณะที่รักษาสัดส่วน
1/* ระบบการพิมพ์ที่ใช้หน่วย REM */
2h1 { font-size: 2.5rem; }    /* 40px */
3h2 { font-size: 2rem; }      /* 32px */
4h3 { font-size: 1.5rem; }    /* 24px */
5h4 { font-size: 1.25rem; }   /* 20px */
6p { font-size: 1rem; }       /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8

การออกแบบที่แม่นยำในพิกเซล

เมื่อดำเนินการออกแบบจากเครื่องมือเช่น Figma หรือ Photoshop:

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

หน่วย CSS ทางเลือก

ในขณะที่ PX, REM, และ EM เป็นหน่วยที่ใช้บ่อยที่สุด ยังมีทางเลือกอื่น ๆ ที่ควรพิจารณา:

หน่วย Viewport (VW, VH)

  • VW (ความกว้างของ viewport): 1vw เท่ากับ 1% ของความกว้างของ viewport
  • VH (ความสูงของ viewport): 1vh เท่ากับ 1% ของความสูงของ viewport
  • กรณีการใช้งาน: สร้างองค์ประกอบที่ปรับขนาดโดยตรงกับขนาด viewport

เปอร์เซ็นต์ (%)

  • สัมพัทธ์กับขนาดขององค์ประกอบแม่
  • กรณีการใช้งาน: เลย์เอาต์ที่มีความลื่นไหลและความกว้างที่ตอบสนอง

หน่วย CH

  • ขึ้นอยู่กับความกว้างของตัวอักษร "0"
  • กรณีการใช้งาน: สร้างคอนเทนเนอร์ที่มีจำนวนตัวอักษรเฉพาะต่อบรรทัด

หน่วย EX

  • ขึ้นอยู่กับความสูงของตัวอักษรตัวเล็ก "x"
  • กรณีการใช้งาน: ปรับแต่งการพิมพ์ โดยเฉพาะสำหรับการปรับความสูงของ x

การพัฒนาหน่วย CSS ในการพัฒนาเว็บ

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

การออกแบบเว็บในช่วงแรก (1990s)

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

การเพิ่มขึ้นของเลย์เอาต์ที่มีความลื่นไหล (ต้นปี 2000s)

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

การปฏิวัติมือถือ (2007-2010)

การเปิดตัว iPhone ในปี 2007 เปลี่ยนแปลงการออกแบบเว็บ โดยทันที เว็บไซต์ต้องทำงานบนหน้าจอที่เล็กเพียง 320px กว้าง สิ่งนี้กระตุ้นความสนใจในเทคนิคการออกแบบที่ตอบสนองและหน่วยสัมพัทธ์ ข้อจำกัดของหน่วย EM (โดยเฉพาะผลกระทบที่เป็นลำดับ) เริ่มชัดเจนมากขึ้นเมื่อการออกแบบมีความซับซ้อนมากขึ้น

ยุคการออกแบบเว็บที่ตอบสนอง (2010-2015)

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

วิธีการ CSS สมัยใหม่ (2015-ปัจจุบัน)

การพัฒนาของเว็บในปัจจุบันยอมรับการผสมผสานของหน่วยสำหรับวัตถุประสงค์ที่แตกต่างกัน:

  • หน่วย REM สำหรับความสม่ำเสมอทั่วโลกและการเข้าถึง
  • หน่วย EM สำหรับการปรับขนาดเฉพาะส่วนประกอบ
  • พิกเซลสำหรับขอบและรายละเอียดเล็ก ๆ
  • หน่วย viewport สำหรับองค์ประกอบที่ตอบสนองได้จริง
  • ฟังก์ชัน CSS calc() สำหรับการรวมประเภทหน่วยที่แตกต่างกัน

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

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

ฟังก์ชันแปลงหน่วย 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 Mixins สำหรับการแปลงหน่วย

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

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

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

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

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

ไม่มีหน่วยเดียวที่ "ดีที่สุด" สำหรับทุกสถานการณ์ การใช้หน่วยผสมผสานมักจะมีประสิทธิภาพที่สุด:

  • หน่วย REM สำหรับการพิมพ์และการจัดระยะห่างที่สม่ำเสมอ
  • หน่วย EM สำหรับการปรับขนาดเฉพาะส่วนประกอบ
  • เปอร์เซ็นต์หรือหน่วย viewport สำหรับความกว้างของเลย์เอาต์
  • พิกเซลสำหรับขอบและรายละเอียดเล็ก ๆ

วิธีที่ดีที่สุดคือการใช้แต่ละหน่วยให้เหมาะสมกับสิ่งที่ทำได้ดีที่สุดในระบบที่สอดคล้องกัน

ทำไมเบราว์เซอร์ถึงตั้งค่าขนาดฟอนต์เริ่มต้นที่ 16px?

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

ฉันสามารถใช้ค่าลบกับหน่วยเหล่านี้ได้หรือไม่?

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

หน่วย EM ทำงานอย่างไรกับองค์ประกอบที่ซ้อนกัน?

หน่วย EM จะรวมกันเมื่อมีการซ้อนกัน ตัวอย่างเช่น:

1.parent {
2  font-size: 16px;
3}
4.child {
5  font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8  font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10

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

ฉันจะจัดการกับหน้าจอที่มี DPI สูง (Retina) ด้วยหน่วย CSS ได้อย่างไร?

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

ฉันควรใช้ REM หรือ EM สำหรับสื่อคำสั่ง?

การสนับสนุนเบราว์เซอร์สำหรับหน่วย REM และ EM ในสื่อคำสั่งได้ดีขึ้นอย่างมาก การใช้หน่วย EM ในสื่อคำสั่งมักจะแนะนำเพราะ:

  1. พวกเขาสัมพันธ์กับขนาดฟอนต์เริ่มต้นของเบราว์เซอร์
  2. พวกเขาเคารพความชอบขนาดฟอนต์ของผู้ใช้
  3. พวกเขาให้จุดตัดที่สม่ำเสมอข้ามเบราว์เซอร์
1/* ใช้หน่วย EM สำหรับสื่อคำสั่ง */
2@media (min-width: 48em) {  /* 768px ด้วยฐาน 16px */
3  /* สไตล์แท็บเล็ต */
4}
5
6@media (min-width: 64em) {  /* 1024px ด้วยฐาน 16px */
7  /* สไตล์เดสก์ท็อป */
8}
9

ฉันจะแปลงระหว่างหน่วยในเครื่องมือออกแบบเช่น Figma หรือ Sketch ได้อย่างไร?

เครื่องมือออกแบบส่วนใหญ่ทำงานหลัก ๆ ด้วยพิกเซล เมื่อดำเนินการออกแบบ:

  1. สังเกตขนาดฟอนต์รูทของโปรเจ็กต์ของคุณ (โดยทั่วไปคือ 16px)
  2. แบ่งค่าพิกเซลด้วยขนาดฟอนต์รูทเพื่อให้ได้ค่า REM
  3. สำหรับค่า EM ให้แบ่งด้วยขนาดฟอนต์ขององค์ประกอบแม่
  4. พิจารณาสร้างโทเค็นการออกแบบหรือค่าตัวแปรสำหรับค่าทั่วไป

เครื่องมือออกแบบบางตัวมีปลั๊กอินที่สามารถช่วยในการแปลงกระบวนการนี้โดยอัตโนมัติ

เบราว์เซอร์จัดการการเรนเดอร์ซับพิกเซลด้วยหน่วยสัมพัทธ์อย่างไร?

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

ผลกระทบต่อประสิทธิภาพของการใช้หน่วย CSS ที่แตกต่างกันคืออะไร?

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

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

  1. "CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/

  2. Marcotte, Ethan. "Responsive Web Design." A List Apart, May 25, 2010. https://alistapart.com/article/responsive-web-design/

  3. Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/

  4. "CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

  5. "CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels

  6. Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/

  7. "Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  8. "Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

ลองใช้เครื่องมือแปลงหน่วยของเราในวันนี้

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

🔗

เครื่องมือที่เกี่ยวข้อง

ค้นพบเครื่องมือเพิ่มเติมที่อาจมีประโยชน์สำหรับการทำงานของคุณ

เครื่องแปลงหน่วยเวลา: ปี, วัน, ชั่วโมง, นาที, วินาที

ลองเครื่องมือนี้

ตัวแปลงเลขฐานสอง-ฐานสิบ: แปลงระหว่างระบบเลข

ลองเครื่องมือนี้

เครื่องแปลงขนาดรองเท้า: ระบบขนาดของสหรัฐอเมริกา สหราชอาณาจักร สหภาพยุโรป และญี่ปุ่น

ลองเครื่องมือนี้

เครื่องแปลงฐานตัวเลข: ไบนารี, ทศนิยม, เฮกซาเดซิมัล & ฐานที่กำหนดเอง

ลองเครื่องมือนี้

เครื่องมือแปลงขนาดรองเท้าระหว่างประเทศ: สหรัฐอเมริกา, สหราชอาณาจักร, สหภาพยุโรป และอื่นๆ

ลองเครื่องมือนี้