คู่มือการแปลงหน่วย CSS: px, rem, em, vw, vh อย่างละเอียด

การเลือกหน่วย CSS ที่ถูกต้องเป็นหนึ่งในการตัดสินใจที่มีผลกระทบมากที่สุดเมื่อเขียน stylesheet หน่วยที่คุณเลือกจะกำหนดว่าองค์ประกอบจะปรับขนาดอย่างไรในหน้าจอขนาดต่างๆ ตอบสนองต่อความต้องการของผู้ใช้ (เช่น การตั้งค่าขนาดตัวอักษรของเบราว์เซอร์) อย่างไร และเลย์เอาต์มีพฤติกรรมที่คาดเดาได้อย่างไร อย่างไรก็ตาม นักพัฒนาจำนวนมากใช้พิกเซลเป็นค่าเริ่มต้นเพราะความเคยชิน ทำให้พลาดความยืดหยุ่นและประโยชน์ด้านการเข้าถึงที่หน่วยสัมพัทธ์มอบให้ คู่มือนี้ครอบคลุมหน่วย CSS หลักทั้งหมด อธิบายว่าเมื่อใดควรใช้แต่ละหน่วย แสดงวิธีการแปลงระหว่างหน่วย และนำเสนอแนวทางปฏิบัติที่ดีที่สุดสำหรับ Responsive Design สมัยใหม่

ทำความเข้าใจการจำแนกประเภทหน่วย CSS

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

หน่วยสัมบูรณ์

หน่วยสัมบูรณ์คือการวัดที่มีขนาดคงที่ หน่วยสัมบูรณ์ที่ใช้บ่อยที่สุดในการพัฒนา Web คือ พิกเซล (px) หน่วยสัมบูรณ์อื่นๆ ได้แก่ พอยท์ (pt), เซนติเมตร (cm), มิลลิเมตร (mm) และนิ้ว (in) หน่วยเหล่านี้ใช้เป็นหลักใน stylesheet สำหรับการพิมพ์หรือเมื่อคุณต้องการการวัดที่ไม่เปลี่ยนแปลงตามบริบท ใน CSS บนหน้าจอ px เป็นหน่วยสัมบูรณ์เดียวที่คุณจะใช้บ่อยๆ

หน่วยสัมพัทธ์

หน่วยสัมพัทธ์คำนวณค่าสุดท้ายจากค่าอ้างอิง em สัมพัทธ์กับขนาดตัวอักษรขององค์ประกอบปัจจุบัน rem สัมพัทธ์กับขนาดตัวอักษรของ root element vw และ vh สัมพัทธ์กับขนาด viewport และเปอร์เซ็นต์สัมพัทธ์กับ parent element หน่วยสัมพัทธ์เป็นรากฐานของ Responsive Design และการเข้าถึง เพราะช่วยให้เลย์เอาต์ของคุณปรับตัวเข้ากับบริบทที่แตกต่างกันโดยอัตโนมัติ

พิกเซล (px): หน่วยพื้นฐาน

พิกเซลเป็นหน่วย CSS ที่เข้าใจง่ายที่สุด เนื่องจากแมปโดยตรงกับพิกเซลหน้าจอ (มีข้อควรระวังบางประการเกี่ยวกับ device pixel ratio) ค่า px จะเท่ากันเสมอไม่ว่าบริบทจะเป็นอย่างไร ทำให้คาดเดาได้และเข้าใจง่าย อย่างไรก็ตาม ความสามารถในการคาดเดานี้มีราคาที่ต้องจ่าย: ขนาดที่ใช้พิกเซลจะไม่ปรับขนาดเมื่อผู้ใช้เปลี่ยนขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์ ซึ่งสร้างปัญหาด้านการเข้าถึง

เมื่อใดควรใช้ px

• ความกว้าง border: border 1px ควรคงเป็น 1px ไม่ว่าการตั้งค่าขนาดตัวอักษรจะเป็นอย่างไร
• box-shadow: การเลื่อนและรัศมีความเบลอของเงามักใช้พิกเซลเพื่อให้ได้ผลลัพธ์ทางสายตาที่สม่ำเสมอ
• รายละเอียดละเอียด: ค่าใดๆ ที่การปรับขนาดจะทำลายการออกแบบทางสายตา เช่น เส้นแบ่งบางๆ หรือการจัดตำแหน่งไอคอนที่แม่นยำ
• ขนาดตัวอักษร root: การตั้ง html { font-size: 16px; } เป็น baseline เป็นรูปแบบที่พบบ่อย แต่คุณควรเคารพค่าเริ่มต้นของเบราว์เซอร์ผู้ใช้

เมื่อใดควรหลีกเลี่ยง px

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

rem: ขนาดสัมพัทธ์กับ root

) ในเบราว์เซอร์ส่วนใหญ่ ขนาดตัวอักษร root เริ่มต้นคือ 16px ดังนั้น 1rem = 16px, 0.5rem = 8px, 2rem = 32px ข้อได้เปรียบสำคัญของ rem คือมันจะปรับขนาดเมื่อผู้ใช้เปลี่ยนขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์ ทำให้เป็นตัวเลือกที่ดีที่สุดสำหรับการเข้าถึง

การแปลง px เป็น rem

สูตรการแปลงง่ายมาก: นำค่าพิกเซลหารด้วยขนาดตัวอักษร root

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

เทคนิค 62.5%

นักพัฒนาหลายคนพบว่าการหารด้วย 16 เป็นเรื่องน่าเบื่อ เทคนิคยอดนิยมคือการตั้งขนาดตัวอักษร root เป็น 62.5% ทำให้ 1rem เท่ากับ 10px ซึ่งช่วยให้การคำนวณในใจง่ายขึ้น: 14px กลายเป็น 1.4rem, 24px กลายเป็น 2.4rem และอื่นๆ

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em: ขนาดสัมพัทธ์กับบริบท

หน่วย em สัมพัทธ์กับขนาดตัวอักษรขององค์ประกอบปัจจุบัน (หรือสำหรับ property อื่นที่ไม่ใช่ font-size จะสัมพัทธ์กับ parent element) นั่นหมายความว่า 1em เท่ากับขนาดตัวอักษรปัจจุบัน และค่า em จะทบต้นเมื่อองค์ประกอบซ้อนกัน พฤติกรรมการทบต้นนี้อาจทั้งทรงพลังและน่าสับสน

ปัญหาการทบต้น

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

แต่ละองค์ประกอบที่ซ้อนกันจะคูณขนาดตัวอักษร ทำให้เกิดการเติบโตแบบทวีคูณ นี่คือเหตุผลที่ rem มักเหมาะสมกว่าสำหรับขนาดตัวอักษร อย่างไรก็ตาม em ทำงานได้ดีในกรณีเฉพาะที่คุณต้องการการปรับขนาดระดับ component

เมื่อใดควรใช้ em

• padding และ margin ของ component: เมื่อคุณต้องการให้ระยะห่างปรับขนาดตามขนาดตัวอักษรของ component, em จะทำให้ทุกอย่างคงสัดส่วน หากคุณเพิ่มขนาดตัวอักษรของปุ่ม padding ของมันจะปรับขนาดโดยอัตโนมัติ
• Media Query Breakpoint: นักพัฒนาบางคนชอบ breakpoint ที่ใช้ em เพราะมันปรับขนาดตามความต้องการขนาดตัวอักษรของผู้ใช้ ทำให้มั่นใจว่าเลย์เอาต์ปรับตัวที่ความกว้างเนื้อหาที่เหมาะสม
• ขนาดไอคอนภายใน component: ไอคอนที่กำหนดขนาดด้วย em จะปรับขนาดตามสัดส่วนกับข้อความโดยรอบ

หน่วย Viewport: vw, vh, vmin, vmax

หน่วย Viewport สัมพัทธ์กับขนาดหน้าต่างเบราว์เซอร์ 1vw เท่ากับ 1% ของความกว้าง viewport, 1vh เท่ากับ 1% ของความสูง viewport vmin คือค่าที่น้อยกว่าระหว่าง vw และ vh, vmax คือค่าที่มากกว่า หน่วยเหล่านี้สำคัญอย่างยิ่งสำหรับการสร้างเลย์เอาต์ที่ตอบสนองต่อพื้นที่หน้าจอที่มีอยู่

กรณีการใช้งานหน่วย Viewport ที่พบบ่อย

ปัญหา vh บนมือถือ

บนเบราว์เซอร์มือถือ 100vh ไม่ได้เท่ากับความสูง viewport ที่มองเห็นเสมอไป แถบที่อยู่และส่วนควบคุมการนำทางของเบราว์เซอร์ใช้พื้นที่ แต่ 100vh รวมพื้นที่ด้านหลังส่วนควบคุมเหล่านี้ ทำให้เนื้อหาด้านล่างของพื้นที่เต็มความสูงถูกตัด CSS สมัยใหม่มี dvh (Dynamic Viewport Height) เป็นโซลูชัน ซึ่งคำนึงถึงแถบเครื่องมือแบบไดนามิก หรือใช้ JavaScript ตั้งค่า CSS Custom Property ตาม window.innerHeight

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

หน่วย Viewport ใหม่: svh, lvh, dvh

CSS ได้แนะนำหน่วยความสูง Viewport ใหม่สามหน่วยเพื่อแก้ปัญหามือถือ:

• svh (Small Viewport Height): ความสูง viewport เมื่อ UI เบราว์เซอร์ทั้งหมดมองเห็นได้ (แถบที่อยู่ขยาย)
• lvh (Large Viewport Height): ความสูง viewport เมื่อ UI เบราว์เซอร์ย่อเล็กสุด (แถบที่อยู่หด)
• dvh (Dynamic Viewport Height): ความสูง viewport ปัจจุบัน ที่เปลี่ยนแปลงตามการขยายหรือหดของ UI เบราว์เซอร์

ตัวแปร small/large/dynamic แบบเดียวกันนี้มีอยู่สำหรับความกว้าง (svw, lvw, dvw) และหน่วย min/max (svmin, lvmin, dvmin ฯลฯ) ใช้ dvh สำหรับเลย์เอาต์เต็มหน้าจอบนมือถือ ใช้ svh เมื่อต้องการรับประกันว่าเนื้อหาแสดงผลโดยไม่ต้องเลื่อน และใช้ lvh เมื่อต้องการเติมพื้นที่ให้มากที่สุดเท่าที่เป็นไปได้

การใช้ clamp() เพื่อการจัดตัวอักษรแบบ Fluid

ฟังก์ชัน CSS clamp() เป็นตัวเปลี่ยนเกมสำหรับการจัดตัวอักษรแบบ Responsive มันรับค่าสามค่า: ค่าต่ำสุด, ค่าที่ต้องการ และค่าสูงสุด เบราว์เซอร์เลือกค่าที่ต้องการ แต่จำกัดไว้ระหว่างค่าต่ำสุดและค่าสูงสุด

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

วิธีการนี้ให้ประโยชน์ของการปรับขนาดตาม viewport โดยไม่มีความเสี่ยงที่ข้อความจะเล็กเกินไปบนมือถือหรือใหญ่เกินไปบนเดสก์ท็อป มันช่วยลดความจำเป็นในการใช้ media query breakpoint สำหรับขนาดตัวอักษร ลดความซับซ้อนของ CSS ลงอย่างมาก

ตารางอ้างอิงการแปลง

ใช้ตารางนี้เป็นข้อมูลอ้างอิงด่วนสำหรับการแปลงทั่วไป ค่าทั้งหมดสมมติขนาดตัวอักษร root 16px และ viewport 1920x1080

แนวทางปฏิบัติที่ดีที่สุดสำหรับหน่วย CSS

• ใช้ rem สำหรับขนาดตัวอักษร: นี่คือกฎที่สำคัญที่สุด ขนาดตัวอักษรที่ใช้ rem เคารพความต้องการของผู้ใช้และปรับขนาดอย่างสม่ำเสมอทั่วทั้งแอปพลิเคชัน
• ใช้ em สำหรับระยะห่างของ component: padding และ margin ภายใน component ได้ประโยชน์จาก em เพราะมันปรับขนาดตามสัดส่วนเมื่อขนาดตัวอักษรของ component เปลี่ยนแปลง
• ใช้ px สำหรับ border และรายละเอียดละเอียด: ค่าที่ไม่ควรปรับขนาดตามขนาดตัวอักษร (เช่น border 1px และการเลื่อนเงา) ควรใช้พิกเซล
• ใช้เปอร์เซ็นต์สำหรับความกว้างเลย์เอาต์: เลย์เอาต์แบบยืดหยุ่นใช้คอลัมน์และความกว้าง container แบบเปอร์เซ็นต์ ทำให้เนื้อหาจัดเรียงใหม่ได้ในขนาดหน้าจอที่แตกต่างกัน
• ใช้หน่วย Viewport สำหรับองค์ประกอบเต็มหน้าจอ: พื้นที่ hero, overlay และองค์ประกอบใดๆ ที่ควรเติม viewport ได้ประโยชน์จาก vh และ vw
• ใช้ clamp() สำหรับ Fluid Typography: แทนที่ media query breakpoint สำหรับขนาดตัวอักษรด้วย clamp() เพื่อสร้างการปรับขนาดที่ราบรื่นระหว่างค่าต่ำสุดและสูงสุด
• อย่าใช้ px ตั้งค่า font-size ของ root: ใช้เปอร์เซ็นต์ (เช่น 62.5%) หรือคงค่าเริ่มต้นของเบราว์เซอร์เสมอ การตั้งค่าด้วยพิกเซลจะเขียนทับความต้องการด้านการเข้าถึงของผู้ใช้
• รักษาความสม่ำเสมอ: เลือกกลยุทธ์หน่วยสำหรับโปรเจกต์และยึดตามนั้น การใช้หน่วยผสมกันอย่างสุ่มทำให้ codebase ยากต่อการบำรุงรักษาและดีบัก