ไม่ใช่ทุกหน่วยวัด จะใช้ได้ทุกกรณี
หากคุณอยากทำหน้าเว็บไซต์ให้ดูดีในทุกหน้าจอโดยเฉพาะจอสมาร์โฟนสิ่งที่คุณต้องเข้าใจเลยคือหน่วยต่าง ๆ ของ CSS ครับ หน่วยมันเยอะมาก แต่ไม่ใช่ทุกหน่วยที่คุณควรใช้นะครับ
เราเคยมีนักพัฒนาเว็บไซต์มาฝึกงานกับเราหลายคน บางคนก็พอมีฝีมือเลยแหละครับ แต่สิ่งที่ทำให้เราแปลกใจสำหรับงานของบางคนคือ การใช้หน่วย Vh ในการกำหนดขนาดของ Element ต่าง ๆ ที่พัฒนามา
คือผมไม่ได้บอกว่ามันใช้ไม่ได้นะ แต่ทุกอย่างมันมีที่และเวลาในการใช้ เราจะมาคุยกันในบทความนี้ครับ
โน้ตจากผู้เขียน: บทความนี้อาจมีศัพท์ด้านการออกแบบและพัฒนาเว็บอยู่ ถ้าคุณมีความรู้พื้นฐานเรื่อง Semantic HTML และ CSS สักหน่อยก็อ่านฉลุยเลย และบทความนี้ใช้แนวทางพัฒนาเว็บแบบ Desktop-first แต่ก็มีผลคล้ายกันกับ Mobile-first เช่นกัน
ทำไมหน่วย Vh ถึงสร้างปัญหาเมื่อพัฒนาเว็บไซต์บน Mobile
เรื่องนี้ต้องเข้าใจก่อนว่า เวลาเราออกแบบเว็บไซต์ให้รองรับ Mobile (หรือ Mobile Responsive) นั้น เราจะต้องดูที่แกนของหน้าจอครับ ซึ่งแกนมันก็มีแค่ 2 แกน
- แกนแนวนอน หรือความกว้างจอ (x-axis)
- แกนแนวตั้ง หรือความสูงจอ (y-axis)
ซึ่งเราจะเลือกยึดแกนไหนก็ได้ แต่แกนที่เหมาะสมมีแกนเดียวครับ
แกนที่เหมาะสมในการพัฒนา Mobile Responsiveness
อยากรู้แกนที่หมาะสม เราต้องมาดูก่อนว่าแกนไหนที่ขนาดมันเปลี่ยนไปเยอะ จากจอ Desktop เป็น จอ Mobile
- Width: 1440px → 375px = เล็กลง 74% = เปลี่ยนมาก
- Height: 900px → 812px = เล็กลงแค่ 10% = เปลี่ยนน้อยมาก
ฉะนั้นจะเห็นได้ว่าความกว้างเปลี่ยนเยอะมาก ซึ่งมันคือแกนแนวนอน (X-Axis) นั่นเอง
พอทุก Element ใน layout มัน scale กันบน width axis เดียวกัน
อัตราส่วนของสิ่งต่าง ๆ บนเว็บ (ถ้าเราใช้หน่วยที่อิงตามความกว้าง) จะไม่เปลี่ยนไปเวลาโดนลดขนาดจอลง เช่น
ถ้า container มี width 100vw แล้วมี child อยู่ข้างในที่ 50vw พอ screen หดลงครึ่งหนึ่ง ทั้งสอง element มันก็หดครึ่งหนึ่งพร้อมกัน ratio คงเดิม
ซึ่งในทางกลับกัน ถ้าเราใช้ vh เข้ามา แล้วมันอิงกับความสูงจอที่เปลี่ยนไปไม่มากทำให้การ scale ของขนาดไม่เปลี่ยนเยอะให้รองรับหน้าจอส่งผลให้ Aspect Ratio เพี้ยนได้นั่นเอง
โน้ตเพิ่มเติม: ปัญหานี้จะไม่เกิดถ้า Element บนแกนเดียวกัน (ตามความกว้าง เช่น พวก Columns ต่าง ๆ) ของคุณใช้หน่วยที่เป็น Static อย่าง px หรือ rem แต่ แต่ แต่คุณต้องมานั่งกำหนดถี่ ๆ ทุกความกว้างและความสูงของ Element ในหลาย ๆ จอ (Breakpoint) ครับ ซึ่งในทางปฏิบัติแทบจะเป็นไปไม่ได้ คุณไม่ควรทำแบบนี้เลย ขอเตือนด้วยความหวังดี เพราะมันเหนื่อยเวลาดูแลและแก้ไข ใช้ Fluid unit ให้มัน Scale ไปตามจอแหละครับ คือหนทางการ Style CSS ในอนาคตแล้ว
เมื่อไหร่ควรใช้ Vh ออกแบบเว็บไซต์(และเมื่อไหร่ไม่ควร)
vh มันไม่ใช่หน่วยที่ไม่ดีนะครับ มันเป็นปัญหาเวลาใช้กับทุก element ที่ยืดหดตามความกว้างหน้าจอเท่านั้น ถ้า use case คุณต้องการ “เท่า viewport height” หรือเท่าความสูงจอจริงๆ vh คือหน่วยที่ถูกต้องครับ
หน่วย Vh เหมาะกับ
- Hero Section ที่ไม่ต้อง maintain ratio กับ sibling element อื่น ๆ ครับ
- Full Screen Background Section คล้ายกับกรณี Hero เลยคือเราต้องการให้รูปแบ็คกราวน์ cover เต็มทั้งหน้าจอเพื่อความสวยงามนั่นเอง
- Element ที่ use case จริง ๆ ต้องการอิงความสูงหน้าจอ
ตัวอย่างชัด ๆ คือการทำ Scroll Snap แบบเว็บไซต์ของ Tesla คือ 1 section เลื่อนแล้วเต็มจอ
หมายเหตุ: ในขณะที่เราเขียนบทความนี้ในปี 2026 เว็บ Tesla ไม่ได้ใช้ effect scroll snapping อีกแล้ว (effect ที่เลื่อนแล้วล็อค section ให้เต็มความสูงจอ) ผมพอเดาได้ครับ มันมีปัญหาเยอะเวลาอุปกรณ์ต่าง ๆ ใช้งาน รวมถึง Interaction Hijack ที่ทำให้ใช้งานได้ยากและผิดหลัก Accessibility แต่คุณยังเข้าไปดูได้ในหลาย ๆ พอร์ตที่เขาทำเลียนแบบไว้อยู่ เช่น Framer portfolio, Framer University, Webflow Portfolio เป็นต้น
หน่วย Vh ไม่เหมาะกับ
ตอบสั้น ๆ ก็ Element และ Use Case ที่เหลือทั้งหมดนั่นแหละครับ โดยเฉพาะ
- ตัวหนังสือ (Text Element) เพราะการกำหนดความสูงของ Container ที่ด้านในมีตัวหนังสือจะทำให้เวลาจอเล็กลงแล้วตัวหนังสือที่ขึ้นบรรทัดใหม่รัว ๆ และมีหลายบรรทัดมากขึ้นทะลุออกมาจาก Element นั่นเอง
- ทุกสิ่งที่เราต้องการคงอัตราส่วนไว้ ซึ่งมันจะเปลี่ยนแน่นอนถ้าเราอิงตามความสูง Marketer กับ Graphic Design ของคุณจะทำงานยากด้วย ทำรูปมาแล้วไม่พอดีกับ Element บนเว็บ
ทางเลือกที่ดีกว่าสำหรับกำหนดขนาดของ Element
1. vw, % หรือกำหนด aspect-ratio สำหรับ Element ที่ต้องการ Maintain ratio
อันนี้คือ solution หลักเลยครับ เนื่องจาก primary scaling axis คือ width อยู่แล้ว ใช้ vw ทุกอย่างก็จะ Scale ตามขนาดจอ (ตราบใดที่ขนาดในระนาบรวมไม่เกิน 100vw นั่นเอง) นอกจากจะใช้ได้ดีมากใน Grid layout แล้ว ก็ยังสามารถใช้คู่กับ Static unit กับ Element อื่นได้ เช่น columns นึงเป็น px อีกอันเป็น vw เป็นต้น
แต่มันไม่ใช่ยาวิเศษที่เซ็ทแล้วจบเลยนะครับ ลองไปดูว่ามีส่วนไหนหรือจอไหนที่ไซส์ไม่ตรงใจบ้าง ก็ค่อย style css ที่ breakpoint นั้น ๆ ครับ รวมไปถึงหาก Element ที่คุณกำลังแต่ง CSS อยู่มันอยู่ใน Container ที่ไปเต็มความกว้างจอ คุณต้องเปลี่ยนไปใช้ % แทน vw นะครับ
2. min-height แทน height สำหรับ Text Element ที่อาจเพิ่มบรรทัด
ปัญหาที่พบบ่อยคือ พอ container มี fixed height แล้ว text wrap เพิ่มบรรทัด content มัน ก็จะทะลุ element ออกไปครับ กำหนดเป็น min-height ดีกว่า ตัวอย่างเช่น
ถ้าคุณใส่ CSS แบบด้านล่าง พอ text เพิ่มบรรทัด content หลุดออกนอกกรอบ Element
.container {
height: 30vh;
}
ให้ใช้เป็น min-height จะทำให้ Container จะเพิ่ม height เองตาม content
.container {
min-height: 200px;
padding: 24px;
}
แบบนี้ container มันยังคงมี minimum height อยู่ แต่พอ content เยอะขึ้น มันก็ขยายเลยครับ ทำให้ไม่ขาด ไม่เกิน ไม่ดัน
3. Flexbox/ Grid auto height สำหรับ Layout Container
ถ้าอยากกำหนัด height ให้ responsive เราก็ดูว่า container ที่ height มันควรเป็น auto ตาม content อยู่แล้ว ให้กำหนดที่ Flexbox หรือ Grid layout ของ Container เลยครับ ไม่ต้อง set height เลย
หรือถ้าจะ set ที่ child ให้ความสูงเป็นตาม child ที่สูงที่สุดก็ใช้ stretch ครับ
แบบนี้ height ของ container มันจะพอดีกับ content อยู่เสมอ ไม่สนว่า screen เล็กหรือใหญ่ ครับ
กรณีตัวอย่าง
เคสที่เรายกมานี้เป็นเพียงตัวอย่างเท่านั้น ซึ่งหน้างานจริงเวลาพัฒนาคุณอาจจะไม่ได้เจอกรณีแบบนี้เป๊ะ ๆ ทำให้การตัดสินใจใช้หน่วยอื่น เช่น clamp(px,vw,px) ก็เป็นได้ ฉะนั้นอยากให้ลองดูเป็นไอเดียและประยุกต์ใช้ตาม Use Case ครับ
ในรูปคือเรามีการกำหนดความกว้างของรูปด้านซ้ายกับข้อความด้านขวาเป็น % ทั้งคู่ (Flexbox layout in container)
ฉะนั้นหากอยากกำหนดความสูงของรูปให้คงอัตรส่วนได้ ในกรณีนี้เราอาจเลือกใช้ได้ทั้ง vw (หาก container เต็ม viewport width), clamp(vh) ใช้ vh ได้หากเรา clamp กำหนดค่าต่ำสุดและสูงสุดของรูปกันไว้ก่อน และสุดท้ายคือ aspect ratio กำหนดอัตราส่วนไปเลย
ซึ่งในกรณีนี้เราหลีกเลี่ยงการใช้ vh เพียว ๆ เพราะมีโอกาสที่อัตราส่วนจะเพี้ยนแน่นอน และหน่วยคงที่อย่างพวก px และ rem ที่ทำให้ responsive ยากนั่นเอง
เช็คลิสต์สำหรับตรวจสอบเว็บไซต์ของคุณ
- เปิด Chrome DevTools และเปลี่ยน device เป็น mobile เช่น iPhone 14 หรือ Samsung Galaxy
- Inspect ทุก Element ที่คิดว่า height มันควรนิ่ง พอ width เปลี่ยน
- ค้นหาหน่วย vh ใน CSS ทั้งหมดครับ ถ้าไม่ใช่ Hero section หรือ Full-screen section ให้ review ว่าตรงกับ use case ที่ต้องการหรือเปล่า
- เช็ค text content ด้วยว่าตอนนี้ตัวหนังสือมันเพิ่มบรรทัด ตัว Container มันขยายตามไหม หรือโดนตัด หรือไปดัน element อื่นแบบที่ไม่ต้องการ
- สุดท้ายคือ เช็คบนอุปกรณ์จริง ไปกว้านเอา ipad, iphone และ android มา โดยเฉพาะ Laptop และ Macbook เพราะเราเจอว่า Element มันแสดงผลเน่าในเครื่องพวกนี้ที่จอไม่สูงอยู่บ่อยครั้ง อย่าประมาทเด็ดขาดเพราะ DevTools ในข้อแรกแสดงผลต่างจากอุปรณ์จริงเสมอครับ
สรุป
หลักง่าย ๆ คือ เวลา responsive design จริง
แกนที่สำคัญที่สุดคือ ความกว้างของหน้าจอ ครับ
พอทุก Element มันขยาย/ลดบนความกว้างแล้วเหมือน ๆ กันแล้ว
Ratio มันก็จะเหมือนเดิมเองทำให้หน้าเว็บคุณยังตรงดีไซน์นั่นเอง
ปัญหาเลยเกิดขึ้นเมื่อเราใช้ vh เข้ามาใส่ในความกว้างหรือความสูงของ Element
เพราะมันอิงกับความสูงจอที่เปลี่ยนไปน้อยมากในแต่ละอุปกรณ์ส่งผลให้ Element ต่าง ๆ มันโดนยืด หรือโดนกดจนเตี้ยแบบมองไม่เห็นนั่นเอง
แต่ vh ไม่ใช่หน่วยที่ไม่ดี มันควรใช้เมื่อเราต้องการทำให้อะไรก็ตามเต็มจออยู่ตลอด เช่น Hero Section เปิดมาแล้วสวยเลย เป็นต้น (แต่ปัญหาก็เยอะอยู่ เดี๋ยวจะมาเขียนให้อ่านวันหลังครับ)
ถ้าอยากให้เราช่วย audit เว็บไซต์ของคุณ หรือมีข้อสงสัยเมื่อรับบริการออกแบบเว็บไซต์ ทีมแคร์ของเรายินดีให้คำปรึกษาครับ
