บทความนี้จะแนะนำการใช้งานการออกแบบเว็บที่ตอบสนอง (ปรับเปลี่ยนได้) ของ HTML5 และแบ่งปันกับทุกคนดังนี้:
ขั้นตอนที่ 1: เพิ่มบรรทัดเมตาแท็กวิวพอร์ตไว้ที่ส่วนหัวของโค้ดหน้าเว็บ
<meta name=viewport content=width=device-width, default-scale=1 />
วิวพอร์ตคือความกว้างและความสูงเริ่มต้นของโค้ดบรรทัดด้านบนหมายถึง: ความกว้างของหน้าเว็บเท่ากับความกว้างของหน้าจอโดยค่าเริ่มต้น (ความกว้าง = ความกว้างของอุปกรณ์) และอัตราส่วนมาตราส่วนดั้งเดิม (มาตราส่วนเริ่มต้น =1) คือ 1.0 นั่นคือขนาดเริ่มต้นของหน้าเว็บกินพื้นที่หน้าจอ 100%
เบราว์เซอร์หลักๆ ทั้งหมดรองรับการตั้งค่านี้ รวมถึง IE9 ด้วย สำหรับเบราว์เซอร์รุ่นเก่า (ส่วนใหญ่เป็น IE6, 7, 8) คุณต้องใช้ css3-mediaqueries.js
<!--[ถ้า lt IE 9]> <script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]-- >
ขั้นตอนที่ 2: (หมายเหตุ) อย่าใช้ความกว้างและขนาดตัวอักษรที่แน่นอน
ความกว้าง:อัตโนมัติ; / ความกว้าง:XX%;
ขั้นตอนที่สาม: (หมายเหตุ) ขนาดตัวอักษร
ขนาดตัวอักษรคือ 100% ของขนาดเริ่มต้นของหน้า ซึ่งก็คือ 16 พิกเซล
อย่าใช้ PX ขนาดสัมบูรณ์สำหรับแบบอักษร ให้ใช้ REM ขนาดสัมพัทธ์
html{ขนาดตัวอักษร:62.5%;} เนื้อความ {แบบอักษร: ปกติ 100% Arial, sans-serif; ขนาดตัวอักษร: 14px;ขั้นตอนที่ 4: เค้าโครงโฟลว์
ความหมายของเลย์เอาต์แบบไหลคือตำแหน่งของแต่ละบล็อกลอยและไม่คงที่
.left{ ความกว้าง:30%; ลอย:ซ้าย} .right{ ความกว้าง:70%;ข้อดีคือ ถ้าความกว้างเล็กเกินไปที่จะรองรับสององค์ประกอบ องค์ประกอบต่อไปนี้จะเลื่อนไปที่ด้านล่างขององค์ประกอบก่อนหน้าโดยอัตโนมัติโดยไม่ล้นในแนวนอน ดังนั้นจึงหลีกเลี่ยงไม่ให้แถบเลื่อนแนวนอนปรากฏ
ขั้นตอนที่ 5: เลือกโหลด CSS
แกนหลักของการออกแบบเว็บไซต์แบบปรับเปลี่ยนได้คือโมดูล Media Query ที่นำเสนอโดย CSS3 ตรวจจับความกว้างของหน้าจอโดยอัตโนมัติ จากนั้นโหลดไฟล์ CSS ที่เกี่ยวข้อง
<link rel=stylesheet type=text/css media=screen และ (ความกว้างของอุปกรณ์สูงสุด: 600px) href=style/css/css600.css />
โค้ดด้านบนหมายความว่าหากความกว้างของหน้าจอน้อยกว่า 600 พิกเซล (ความกว้างของอุปกรณ์สูงสุด: 600px) ให้โหลดไฟล์ css600.css
หากความกว้างของหน้าจออยู่ระหว่าง 600 พิกเซลถึง 980 พิกเซล ให้โหลดไฟล์ css600-980.css
<link rel=stylesheet type=text/css media=screen และ (ความกว้างขั้นต่ำ: 600px) และ (ความกว้างของอุปกรณ์สูงสุด: 980px) href=css600-980.css />
นอกจากนี้ (ไม่แนะนำ): นอกจากการโหลดไฟล์ CSS ด้วยแท็ก html แล้ว คุณยังสามารถโหลดไฟล์เหล่านั้นในไฟล์ CSS ที่มีอยู่ได้อีกด้วย
@import url(css600.css) หน้าจอและ (ความกว้างของอุปกรณ์สูงสุด: 600px);
ขั้นตอนที่ 6: กฎ CSS @media
หน้าจอ @media และ (ความกว้างของอุปกรณ์สูงสุด: 400px) { .left{ float:none;} }เมื่อหน้าจอมีขนาดเล็กกว่า 400 ด้านซ้ายจะยกเลิกการลอยตัว
ขั้นตอนที่ 7: การปรับภาพ
การออกแบบเว็บที่ตอบสนองต้องใช้การปรับขนาดรูปภาพอัตโนมัติ
img วัตถุ {ความกว้างสูงสุด: 100%;}IE เวอร์ชันเก่าไม่รองรับความกว้างสูงสุด ดังนั้นฉันจึงต้องเขียน:
img {ความกว้าง: 100%;}เมื่อปรับขนาดภาพบนแพลตฟอร์ม Windows ภาพอาจบิดเบี้ยวได้ ในเวลานี้ คุณสามารถลองใช้คำสั่งที่เป็นกรรมสิทธิ์ของ IE ได้
img { ความกว้าง: 100%; -ms-interpolation-mode: bicubic;}หรือใช้ js--imgSizer.js
addLoadEvent(function() { var imgs = document.getElementById(content).getElementsByTagName(img); imgSizer.collate(imgs); });หมายเหตุ: หากเป็นไปได้ วิธีที่ดีที่สุดคือโหลดรูปภาพที่มีความละเอียดต่างกันตามขนาดหน้าจอที่แตกต่างกัน
ใช้งานง่าย:
<style type=text/css> img{ max-width:100%;} วิดีโอ{ max-width:100%; height:auto;} ส่วนหัว ul li{ float:left; list-style- ประเภท: none; margin-right:10px;} ส่วนหัว เลือก {display: none;} @media (ความกว้างสูงสุด: 960px) { header ul { display: none;} ส่วนหัว เลือก { display:inline-block;} } </style> <body> <header> <ul> <li><a href=# class=active>หน้าแรก</a></li> <li><a href =#>AAA</a></li> <li><a href=#>BBB</a></li> <li><a href=#>CCC</a></li> <li ><a href=#>DDD</a></li> </ul> <select> <option class=selected><a href=#>บ้าน</a></option> <option value=/AAA>AAA</option> <option value=/BBB>BBB</ option> <option value=/CCC>CCC</option> <option value=/DDD>DDD</option> </select> </header> </body>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network