พื้นฐานของการออกแบบเว็บตอบสนอง

I. บทนำ▲

ลองมาดูตัวอย่างง่ายๆสองแบบ ประการแรกอาจเป็นหน้าต่างที่ทำให้เกิดแสงจางตามความส่องสว่างภายนอก หรือผนังกระจกที่เราได้รับใกล้ชิดมากขึ้นพวกเขาดูเหมือนจะบิดเบี้ยว ในระยะสั้นสิ่งที่สถาปนิกแสวงหาในการเคลื่อนไหวนี้คือการเอาชนะ / นามธรรมจากข้อ จำกัด โดยธรรมชาติที่เชื่อมโยงกับการสนับสนุนต่างๆ ในโลกของสถาปัตยกรรมเราสามารถยืนยันได้ว่าการสนับสนุนเหล่านี้เป็นไปอย่างแท้จริงและหลากหลาย

ไม่มีรูปภาพ
ด้วยการเล่นแบบเบา ๆ อาคารนี้ดูเหมือนจะมีโครงสร้างที่แตกต่างกัน ที่มา: http://www.essential-architecture.com/STYLE/STY-075.htm
การออกแบบเว็บแบบโต้ตอบเกิดขึ้นเนื่องจากเราเผชิญกับปัญหาเช่นเดียวกับสถาปนิก: การปรับตัวให้เข้ากับการสนับสนุน

แต่เราเคยมีเพียงหนึ่งหรือสองเบราว์เซอร์และขนาดหน้าจอแตกต่างกันเล็กน้อย ตอนนี้เรามีเบราว์เซอร์จำนวนมากและมีมติเป็นจำนวนมาก (ตั้งแต่ 240×320 ถึง 2515×1886 ขึ้นไป) แต่ยังสื่อ: เราสามารถเข้าถึงอินเทอร์เน็ตจากคอมพิวเตอร์เดสก์ท็อปแบบคลาสสิกของเรา แต่ยังผ่านทางสมาร์ทโฟนแท็บเล็ตเป็นต้น อย่างไรก็ตามเรารู้จากหลังว่าวิธีการแสดงเว็บไซต์แตกต่างจากคอมพิวเตอร์เดสก์ท็อป

ไม่มีรูปภาพ
เว็บในขณะนี้ แหล่งที่มา: http://bradfrostweb.com/blog/post/this-is-the-web/
และนั่นคือสิ่งที่เรามีตอนนี้ เราเริ่มช้าในการเข้าถึงอินเทอร์เน็ตผ่านทางโทรทัศน์ (มักจะผ่านทางคอนโซลหรือกล่อง) ต้นแบบเริ่มปรากฏขึ้นด้วย Internet บนวิทยุรถยนต์นาฬิการถยนต์ตู้เย็น … ในระยะสั้นโลกใหม่ที่เราจะต้องปรับตัวเอง

ไม่มีรูปภาพ
เว็บพรุ่งนี้ แหล่งที่มา: http://bradfrostweb.com/blog/post/this-is-the-web/
ครั้งที่สอง แนวคิดสามข้อของการออกแบบเว็บที่ตอบสนองต่อ▲

ในการสร้างแอปพลิเคชันบนเว็บที่ตอบสนองต่อ Web Design เราจำเป็นต้องสร้าง 3 ประเด็นต่อไปนี้:

ตารางแสดงผลที่มีความยืดหยุ่น:
กล่าวคือแม่แบบที่ไม่ขึ้นอยู่กับความละเอียดต่ำสุดต่ำสุด;
สื่อที่ยืดหยุ่น:
เพื่อให้แน่ใจว่าภาพวิดีโอของฉัน (ถ้าจำเป็น) ไม่เกินกรอบของตารางการแสดงผล / แม่แบบของเรา
ชุดของกฎ CSS ตาม Media Queries:
หลักการ: วางเงื่อนไขในการแสดงผลเพื่อแสดง / ซ่อนหรือเปลี่ยนการแสดงผลเว็บแอ็พพลิเคชันของเรา
ถ้าเราเปรียบเทียบกับสถาปัตยกรรมสามจุดสุดท้ายแสดงถึงเครื่องมือของเรา เท่าที่วัสดุของเรามีความกังวลนี้จะสอดคล้องกับเบราว์เซอร์ของเรา วัสดุบางอย่างดีกว่าคนอื่น ๆ ตัวอย่างเช่นไม้ที่ไม่แข็งแรง IE6 มีประสิทธิภาพน้อยกว่าคอนกรีตเสริมเหล็ก Chrome เครื่องมือของเราไม่ว่าจะดีหรือไม่ก็ตามจะไม่ง่ายเสมอไป เนื่องจากความคิดที่เป็นเท็จและต่อต้าน: ไม่สามารถสร้าง “Responsive Web Design” บนเบราว์เซอร์รุ่นเก่าได้

โชคดีที่สามารถปรับตัวให้เข้ากับสิ่งนี้ได้ อย่างไรก็ตามค่าใช้จ่ายจะมีความสำคัญมากขึ้นและจำเป็นต้องใช้กรอบงาน JavaScript / polyfills (โค้ด JavaScript เพื่อเติมช่องว่างใน HTML5 / CSS3) เราจะเห็นบางส่วนของพวกเขาตลอดบทความ