บทความบทนำของ wulin.com (www.vevb.com): การออกแบบเว็บตอบสนอง
ด้วยความนิยมของ 3G ผู้คนจำนวนมากขึ้นใช้โทรศัพท์มือถือเพื่อท่องอินเทอร์เน็ต
อุปกรณ์มือถือกำลังเหนือกว่าอุปกรณ์เดสก์ท็อปและกลายเป็นเทอร์มินัลที่พบบ่อยที่สุดในการเข้าถึงอินเทอร์เน็ต ดังนั้นนักออกแบบเว็บไซต์จะต้องเผชิญกับปัญหาที่ยากลำบาก: พวกเขาจะนำเสนอหน้าเว็บเดียวกันกับอุปกรณ์ที่มีขนาดต่างกันได้อย่างไร
หน้าจอของโทรศัพท์มือถือค่อนข้างเล็กมักจะต่ำกว่า 600 พิกเซล ความกว้างของหน้าจอของพีซีโดยทั่วไปสูงกว่า 1,000 พิกเซล (ปัจจุบันความกว้างหลักคือ 1,366 × 768) และบางส่วนถึง 2,000 พิกเซล ไม่ใช่เรื่องง่ายที่จะได้ผลลัพธ์ที่น่าพอใจบนหน้าจอที่มีขนาดต่างกัน
วิธีแก้ปัญหาสำหรับหลาย ๆ เว็บไซต์คือการจัดหาหน้าเว็บที่แตกต่างกันสำหรับอุปกรณ์ต่าง ๆ เช่นการจัดหาเวอร์ชันมือถือหรือเวอร์ชัน iPhone/iPad สิ่งนี้ทำให้มั่นใจได้ถึงผลกระทบ แต่มันค่อนข้างลำบาก มันต้องมีการบำรุงรักษาหลายเวอร์ชัน ยิ่งกว่านั้นหากเว็บไซต์มีหลายพอร์ทัลมันจะเพิ่มความซับซ้อนของการออกแบบสถาปัตยกรรมอย่างมาก
ดังนั้นบางคนจินตนาการมานานว่าสามารถออกแบบได้ในครั้งเดียวและโดยทั่วไปจะใช้กับหน้าเว็บเดียวกันปรับให้เข้ากับหน้าจอที่มีขนาดต่างกันโดยอัตโนมัติและปรับเค้าโครงโดยอัตโนมัติตามความกว้างของหน้าจอ?
1. แนวคิดของการออกแบบเว็บแบบปรับตัว
ในปี 2010 Ethan Marcotte เสนอคำว่าการออกแบบเว็บที่ตอบสนองต่อคำซึ่งหมายถึงการออกแบบเว็บที่สามารถจดจำความกว้างของหน้าจอโดยอัตโนมัติและทำการปรับเปลี่ยนที่สอดคล้องกัน
เขาเป็นตัวอย่างของภาพบุคคลของตัวละครเอกทั้งหกของการผจญภัยของ Sherlock Holmes หากความกว้างของหน้าจอมากกว่า 1,300 พิกเซลจะมี 6 รูปภาพอยู่เคียงข้างกัน
หากความกว้างของหน้าจออยู่ระหว่าง 600 พิกเซลและ 1300 พิกเซลรูปภาพ 6 ภาพจะแบ่งออกเป็นสองบรรทัด
หากความกว้างของหน้าจออยู่ระหว่าง 400 พิกเซลและ 600 พิกเซลแถบนำทางจะเลื่อนไปที่หัวของหน้า
หากความกว้างของหน้าจอต่ำกว่า 400 พิกเซล 6 รูปภาพจะแบ่งออกเป็นสามบรรทัด
Mediaqueri.es มีตัวอย่างเพิ่มเติมเช่นนี้ข้างต้น
นอกจากนี้ยังมีวิดเจ็ตทดสอบที่นี่ซึ่งสามารถแสดงเอฟเฟกต์การทดสอบของหน้าจอที่มีความละเอียดที่แตกต่างกันบนหน้าเว็บในเวลาเดียวกัน ฉันแนะนำให้ติดตั้ง