จากประสบการณ์การพัฒนารายวันและข้อมูลที่เกี่ยวข้องบนอินเทอร์เน็ต ความแตกต่างระหว่าง การปรับตัว และ การตอบสนองได้ รับการวิเคราะห์ในภาษาถิ่นที่ง่ายและเข้าใจง่าย หมายเหตุ: บทความนี้จะวิเคราะห์ความแตกต่างระหว่างการปรับตัวและการตอบสนองเท่านั้น และจะเข้าใจความเป็นมาของที่มาของมัน
1. รูปแบบที่ปรับเปลี่ยนได้คืออะไร?
รูปแบบที่ปรับเปลี่ยนได้คือรูปแบบที่ปรับตามความกว้างบนอุปกรณ์ที่มีขนาดต่างกัน หน้าเว็บจะปรับขนาดความกว้างในสัดส่วนที่เท่ากัน โดยนำเสนอเนื้อหาหลักและรูปแบบที่เหมือนกัน
แผนภาพสาธิตการจัดวางแบบปรับเปลี่ยนได้:
เมื่อความกว้างของหน้าจอขยาย เนื้อหาของหน้าเว็บก็จะปรับขนาดในสัดส่วนที่เท่ากัน ไม่ว่าความกว้างของหน้าจอจะเป็นอย่างไร เลย์เอาต์ของเนื้อหาหลักของหน้าเว็บก็จะเหมือนกันเสมอ
2. รูปแบบที่ตอบสนองคืออะไร?
รูปแบบที่ตอบสนองหมายความว่าเค้าโครงเนื้อหาของหน้าจะปรับและเปลี่ยนแปลงโดยอัตโนมัติตามการเปลี่ยนแปลงของขนาดหน้าจอ ทำให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้น
รูปภาพสาธิตรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์:
เมื่อความกว้างของหน้าจอปรับขนาด หน้าจะปรับตามนั้น และเค้าโครงและเนื้อหาที่แสดงจะเปลี่ยนไป
1. พื้นหลังของเค้าโครงแบบปรับได้
ในยุคแรก ๆ ของยุคพีซี นักออกแบบเว็บไซต์จะออกแบบเพจที่มีความกว้างคงที่ ในตอนแรก จอคอมพิวเตอร์ไม่มีความละเอียดหลายประเภท เนื่องจากในขณะนั้นมีคอมพิวเตอร์เพียงไม่กี่เครื่อง ต่อมา ด้วยความหลากหลายของจอภาพที่เพิ่มขึ้นและความนิยมของโน้ตบุ๊กและแท็บเล็ต ปัญหาเกี่ยวกับเพจที่มีความกว้างคงที่นี้จึงเกิดขึ้น จึงมีวิธีการจัดวางรูปแบบใหม่ รูปแบบที่ปรับตามความกว้างได้ เค้าโครงแบบปรับได้ที่เรามักพูดถึงส่วนใหญ่หมายถึงเค้าโครงแบบปรับความกว้างได้
ต่อมา สงครามอินเทอร์เน็ตได้ย้ายจากพีซีไปสู่โทรศัพท์มือถือ และมาตรฐาน HTML5 ก็ได้รับการเผยแพร่ เลย์เอาต์แบบปรับเปลี่ยนได้ขยายจากพีซีไปยังโทรศัพท์มือถือ ด้วยเหตุนี้ เลย์เอาต์แบบปรับได้จึงได้รับความนิยมและกลายเป็นข้อกำหนดที่จำเป็นสำหรับการออกแบบเว็บไซต์
2. พื้นหลังของการเกิดขึ้นของเค้าโครงแบบตอบสนอง
แม้ว่าความสามารถในการปรับตัวจะกลายเป็นข้อกำหนดที่จำเป็นสำหรับการออกแบบเว็บ แต่ก็ยังทำให้เกิดปัญหาหากหน้าจอมีขนาดเล็กเกินไป แม้ว่าเนื้อหาเว็บจะสามารถปรับให้เข้ากับขนาดหน้าจอได้ แต่เมื่อดูบนหน้าจอขนาดเล็ก เนื้อหาก็จะดูหนาแน่นเกินไป ซึ่งจะลดประสบการณ์ผู้ใช้ ในเวลานี้ แนวคิดที่ได้รับมาเพื่อแก้ไขปัญหานี้คือโครงร่างแบบตอบสนอง โดยจะจดจำความกว้างของหน้าจอโดยอัตโนมัติและปรับตามนั้น รูปแบบและเนื้อหาที่แสดงของหน้าเว็บอาจมีการเปลี่ยนแปลง
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน downcodes.com