Web Programming - Responsive Web Design

54310101 ณัฐพล พัฒนาวิจิตร

Responsive Behavior - Breakpoint

ได้แบ่งความกว้างของหน้าจอเป็นสามช่วง ได้แก่

โดยใช้ Media Query ที่ใช้ในการแบ่งคือ

@media (max-width: 991px) {

และ

@media (max-width: 767px) {

โดยในการพัฒนานั้นทำในลักษณะ Desktop First คือทำเวอร์ชันสำหรับหน้าจอขนาดใหญ่ก่อน แล้วใช้ Media Query ในการปรับให้เหมาะสมกับขนาดของจอที่เล็กลง

จาก Desktop ไปยังขนาดหน้าจออื่นๆ มีการปรับดังนี้

ปรับ Height, Margin, Padding, Line Height, และ Absolute Position สำหรับการจัดเรียงตัวอักษรในส่วนของรูปใหญ่สุดเพื่อให้รูปและตัวอักษรมีขนาดเล็กลง
ซ่อนเมนูลัดใน sidebar และปรับความกว้างในส่วนเนื้อหาเป็น 100%

ปรับขนาด font โดยรวมทั้งหน้าลดลง เพื่อให้ไม่ใหญ่เกินไปใน Mobile ซึ่งจะทำให้หน้าเว็บยาวเกินโดยไม่จำเป็น
นำช่อง Search ออก และปรับโลโก้มาอยู่ตรงกลาง
ปรับส่วน Navigation เป็นแนวตั้ง เพื่อให้กดได้ง่ายขึ้น
ลด Margin ด้านข้างของทั้งหมด เพื่อให้ใช้พื้นที่ในจอได้คุ้มค่ามากขึ้น และไม่ทำให้เว็บยาวเกินไป
ตัดรูป Thumbnail ในส่วนของข่าวออก

ใช้การกำหนดความกว้าง, ความสูง, และตำแหน่งต่างๆ แบบ dynamic เพื่อให้รองรับจอได้ทุกขนาด ได้แก่
- กำหนดความกว้างเป็น %
- กำหนดความกว้างโดยใช้ calc() เพื่อคำนวนความกว้างที่ถูกต้อง
- กำหนด Absolute Position เป็น % และใช้ translate เพื่อช่วยจัดให้อยู่ตรงกลาง
ใช้ display: table และ display: table-cell ในการทำ sidebar ที่มีขนาดคงที่ และ content ที่มีขนาดเท่ากับส่วนที่เหลือ
ใช้ background: cover เพื่อให้รูปแบกกราวด์เต็มกรอบตลอดเวลาไม่ว่ารูปและหน้าจอมีขนาดเท่าไหร่ก็ตาม