รูปแบบที่ตอบสนองคืออะไร?
รูปแบบที่ปรับเปลี่ยนตามอุปกรณ์หมายความว่าหน้าเดียวกันมีรูปแบบที่แตกต่างกันไปตามขนาดหน้าจอที่แตกต่างกัน ทุกวันนี้ เมื่ออินเทอร์เน็ตบนมือถือได้รับการพัฒนาอย่างมาก หน้าเว็บที่เราพัฒนาบนเบราว์เซอร์เดสก์ท็อปไม่สามารถตอบสนองความต้องการในการดูบนอุปกรณ์มือถือได้อีกต่อไป วิธีการพัฒนาแบบดั้งเดิมคือการพัฒนาเพจหนึ่งชุดในฝั่งพีซี และอีกชุดของเพจในฝั่งมือถือ แต่นี่เป็นเรื่องที่ยุ่งยากมาก เนื่องจากเทอร์มินัลที่แตกต่างกันมากขึ้นเรื่อยๆ คุณจะต้องพัฒนาหน้าเว็บหลายเวอร์ชัน หากต้องการใช้เลย์เอาต์แบบตอบสนอง คุณจะต้องพัฒนาชุดเดียวเท่านั้น EthanMarcotte เสนอแนวคิดของเลย์เอาต์แบบตอบสนอง ในเดือนพฤษภาคม 2010 กล่าวโดยย่อคือ เว็บไซต์สามารถใช้งานร่วมกับเทอร์มินัลหลายเครื่องได้
ความแตกต่างระหว่างการพัฒนาแบบตอบสนองและการพัฒนาแบบแยกสำหรับมือถือและพีซี: การพัฒนาแบบตอบสนองจะเขียนชุดอินเทอร์เฟซเท่านั้น และแสดงเค้าโครงและเนื้อหาที่แตกต่างกันโดยการตรวจจับความละเอียดของวิวพอร์ตและทำการประมวลผลโค้ดบนไคลเอนต์สำหรับไคลเอนต์ที่แตกต่างกัน เทอร์มินัลมือถือและเทอร์มินัลพีซีได้รับการพัฒนาแยกกัน ด้วยการตรวจจับความละเอียดของวิวพอร์ต จึงสามารถระบุได้ว่าอุปกรณ์ที่เข้าถึงในปัจจุบันนั้นเป็นพีซี แท็บเล็ต หรือโทรศัพท์มือถือ จึงขอเซิร์ฟเวอร์และส่งคืนเพจต่างๆ
หลักการพัฒนาแบบตอบสนองคืออะไร?
หลักการ พัฒนา แบบตอบสนอง คือการใช้ Media Query ใน CSS3 เพื่อตั้งค่าเค้าโครงและสไตล์ที่แตกต่างกันสำหรับอุปกรณ์ที่มีความกว้างต่างกันเพื่อปรับให้เข้ากับอุปกรณ์ต่างๆ
คำจำกัดความและการใช้งานแบบสอบถาม SS3 @media:
เมื่อใช้แบบสอบถาม @media คุณสามารถกำหนดสไตล์ที่แตกต่างกันสำหรับสื่อประเภทต่างๆ ได้ @media สามารถกำหนดสไตล์ที่แตกต่างกันสำหรับขนาดหน้าจอที่แตกต่างกัน โดยเฉพาะอย่างยิ่งหากคุณต้องการตั้งค่าเพจแบบตอบสนอง @media นั้นมีประโยชน์มาก เมื่อคุณรีเซ็ตขนาดเบราว์เซอร์ หน้าเว็บจะแสดงผลอีกครั้งตามความกว้างและความสูงของเบราว์เซอร์
ตัวอย่างเช่น หากความกว้างของหน้าจอน้อยกว่า 500 พิกเซล ให้เปลี่ยนสีพื้นหลังเป็นสีแดง
หากต้องการใช้เลย์เอาต์แบบตอบสนอง วิธีการที่ใช้กันทั่วไปมีดังนี้:
(1) ใช้คำสั่งสื่อใน CSS (วิธีที่ง่ายที่สุด)
(2) ใช้ JavaScript (ต้นทุนการใช้งานค่อนข้างสูง)
(3) ใช้เฟรมเวิร์กโอเพ่นซอร์สของบุคคลที่สาม (เช่น bootstrap ซึ่งสามารถรองรับเบราว์เซอร์ต่างๆ)
ตั้งค่าเมตาแท็ก
ขั้นแรกเราต้องตั้งค่าเมตาแท็กเพื่อบอกเบราว์เซอร์ให้กำหนดความกว้างของวิวพอร์ต (พื้นที่ที่มองเห็นได้ของหน้าเว็บ) เท่ากับความกว้างของอุปกรณ์และห้ามไม่ให้ผู้ใช้ซูมเข้าในหน้าเว็บ เนื่องจาก แสดงด้านล่าง:
<metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no>
เมื่อตั้งค่าวิวพอร์ต คุณจะต้องใส่ใจกับขนาดของพื้นที่ที่มองเห็นได้ของหน้าเว็บ ความสูงจะถูกขยายโดยอัตโนมัติตามเนื้อหาหน้าเว็บ ความหมายของเนื้อหาในเมตาแท็กข้างต้นมีดังนี้:
● วิวพอร์ต: วิวพอร์ตซึ่งแสดงถึงพื้นที่ที่มองเห็นได้ของหน้าเว็บ
●ความกว้าง: ควบคุมขนาดของวิวพอร์ต คุณสามารถระบุค่าเฉพาะ เช่น 600 หรือค่าพิเศษที่ประกอบด้วยคำหลัก ตัวอย่างเช่น ความกว้างของอุปกรณ์แสดงถึงความกว้างของอุปกรณ์
●มาตราส่วนเริ่มต้น: ระบุอัตราส่วนมาตราส่วนเริ่มต้น ซึ่งเป็นอัตราส่วนมาตราส่วนเมื่อโหลดหน้าเว็บครั้งแรก
●สเกลสูงสุด: ระบุอัตราส่วนสูงสุดที่ผู้ใช้ได้รับอนุญาตให้ซูมเข้า ตั้งแต่ 0 ถึง 10.0
●สเกลขั้นต่ำ: ระบุว่าผู้ใช้สามารถซูมไปยังสเกลขั้นต่ำได้ ตั้งแต่ 0 ถึง 10.0
●ผู้ใช้สามารถปรับขนาดได้: ระบุว่าผู้ใช้สามารถซูมด้วยตนเองได้หรือไม่ "ใช่" หมายถึงอนุญาตให้ปรับขนาดได้ "ไม่" หมายความว่าห้ามปรับขนาด
สอบถามสื่อ
ข้อความค้นหาสื่อ CSS สามารถกำหนดสไตล์ CSS ที่แตกต่างกันสำหรับสื่อประเภทต่างๆ (การพิมพ์หน้าจอ) ตามเงื่อนไขที่ระบุ เพื่อให้ผู้ใช้ที่ใช้อุปกรณ์ต่างกันได้รับประสบการณ์ที่ดีที่สุด
ใช้ HTML เป็นตัวอย่าง:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1><title>บทช่วยสอนเบื้องต้นเกี่ยวกับหน้าที่ตอบสนอง: Albert Yang</title><linkrel =stylesheethref=style.css><linkre l=stylesheethref=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssintegrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnNcrosso rigin=anonymous></head><body><header><ahref=#>AlbertYang</a><ul><li><ahref=#>หน้าแรก</a></li><li><ahref= #>บล็อก</a></li><li><ahref=#>ติดต่อฉัน</a></li><li><ahref=#>กระดานข้อความ</a></li><li> <ahref=#>เกี่ยวกับฉัน</a> </li><li><ahref=#>ผนังรูปภาพ</a></li></ul><div><inputtype=textplaceholder=Search><iclass=fafa-searcharia-hidden=true></i ></div></header><div><div><h2>รูปแบบที่ปรับเปลี่ยนตามอุปกรณ์</h2><p>รูปแบบที่ปรับเปลี่ยนตามอุปกรณ์หมายความว่าหน้าเดียวกันมีรูปแบบที่แตกต่างกันในขนาดหน้าจอที่แตกต่างกัน วิธีการพัฒนาแบบดั้งเดิมคือการพัฒนาชุดสำหรับพีซีและอีกชุดสำหรับโทรศัพท์มือถือ อย่างไรก็ตาม เมื่อใช้เค้าโครงแบบตอบสนอง คุณจะต้องพัฒนาเพียงชุดเดียวเท่านั้น ความแตกต่างระหว่างการออกแบบที่ตอบสนองและการออกแบบที่ปรับเปลี่ยนได้: การออกแบบที่ปรับเปลี่ยนได้จะพัฒนาชุดอินเทอร์เฟซ และแสดงเค้าโครงและเนื้อหาที่แตกต่างกันโดยการตรวจจับความละเอียดของวิวพอร์ต และทำการประมวลผลโค้ดบนฝั่งไคลเอ็นต์สำหรับการออกแบบที่ปรับเปลี่ยนได้ จำเป็นต้องมีการพัฒนาอินเทอร์เฟซหลายชุด โดยการตรวจจับความละเอียดของวิวพอร์ต จะพิจารณาว่าอุปกรณ์ที่เข้าถึงอยู่ในปัจจุบันนั้นเป็นพีซี แท็บเล็ต หรือโทรศัพท์มือถือ จึงขอชั้นบริการและส่งคืนเพจต่างๆ ข้อความค้นหาสื่อ CSS3 ช่วยให้เราสามารถกำหนดสไตล์ที่แตกต่างกันสำหรับสื่อประเภทต่างๆ เมื่อรีเซ็ตขนาดหน้าต่างเบราว์เซอร์ หน้าเว็บจะแสดงผลอีกครั้งตามความกว้างและความสูงของเบราว์เซอร์ </p><ahref=#>อ่านข้อความฉบับเต็ม</a></div><imgsrc=img.png></div></body></html>
ผลการวิ่ง:
ต่อไปนี้เป็นตัวอย่างที่ครอบคลุมเพื่อสาธิตการใช้งานรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>รูปแบบที่ตอบสนอง</title><metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1, ผู้ใช้ -scalable=no/><style>*{margin:0px;padding:0px;font-f amily:Microsoft Yahei;}#head,#foot,#main{height:100px;width:1200px;/*width:85%;*/พื้นหลังสี:goldenrod;text-align:center;font-size:48px ; ความสูงบรรทัด:100px;margin:0auto;}#headdiv{display:none;font-size:20px;h แปด:30px;width:100px;สีพื้นหลัง:สีเขียว;float:right;line-height:30px;margin-top:35px;}#headul{width:80%;}#headulli{width:20%;float: ซ้าย; text-align:center;list-style:none;font-size:20px;}#main{เขา ight:auto;margin:10pxauto;overflow:hidden;}.left,.center,.right{height:600px;line-height:600px;float:left;width:20%;สีพื้นหลัง:red}.center{ ความกว้าง:60%;เส้นขอบด้านซ้าย:10pxsolid#FFF;เส้นขอบด้านขวา:10pxso lid#FFF;box-sizing:border-box;}@mediaonlyscreenand(max-width:1200px){#head,#foot,#main{width:100%;}}@mediaonlyscreenand(max-width:980px){. ขวา{display:none;}.left{width:30%;}.center{width:70%;border- right:hidden;}}@mediaonlyscreenand(max-width:640px){.left,.center,.right{width:100%;display:block;height:200px;line-height:200px;}.center{border: ซ่อนไว้;ขอบบน:10pxsolid#FFFFFF;เส้นขอบล่าง:10pxso ฝา#FFFFFF;height:600px;line-height:600px;}#headul{display:none;}#headdiv{display:block;}}</style></head><body><div><headerid=head ><ul><li>ส่วนหัว1</li><li>ส่วนหัว2</li><li>ส่วนหัว2</li><li>ส่วนหัว2</li>< li>ส่วนหัว2</li></ul><div>ไอคอน</div></header><sectionid=main><divclass=left>ซ้าย</div><divclass=center>center</div><divclass =right>ขวา</div></section><footerid=foot>ส่วนท้าย</footer></div></body></html>ผลการวิ่ง:
