HTML5響應式布局
阿新 • • 發佈：2017-05-12
htm 設備 ini 內嵌 網站 wid spl media add
1.含義
網站兼容多個終端。比如以前沒有使用響應式布局的網站，你在不同的瀏覽器，或者計算機和手機看到的(大小)效果是不一樣的（這種不一致性不是前端開發所想要的結果）。而使用了響應式布局，就可以兼容各個瀏覽器，消除不一致性。
2.實現
css媒介查詢：
- 設備寬高：device-width，device-height。（物理大小）
- 渲染窗口寬高：width，height。
- 手持設備方向：ortation。
- 手持設備分辨率：resolution。
使用方法：
- 外聯和內嵌
3.代碼示例
實現響應式布局其實很簡單，但是響應式布局的缺點就是：代碼累贅，影響打開網頁的速度。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>響應式布局實例</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" width="device-width,initial-scale=1.0"> 7 <style type="text/css"> 8 *{ 9 margin:0px; 10 padding: 0px; 11 } 12 13 .head,.contain,.foot{ 14 margin: 10px auto; 15 background-color: red; 16 } 17 18 .head,.foot{ 19 width: 100%; 20 height: 100px; 21 } 22 23 .contain{ 24 width: 100%; 25 height: 500px; 26 background-color: transparent; 27 } 28 29 .left,.middle,.right{ 30 float: left; 31 margin: auto 5px; 32 background-color: blue; 33 } 34 35 .left,.right{ 36 height: 500px; 37 width: 27%; 38 } 39 40 .middle{ 41 height: 500px; 42 width: 40%; 43 } 44 /*屏幕大小在100px，到960px之間，沒有顯示*/ 45 @media screen and (min-width: 100px) and (max-width: 960px){ 46 *{ 47 display: none; 48 } 49 } 50 51 52 53 54 55 56 </style> 57 </head> 58 <body> 59 <div class="head"></div> 60 <div class="contain"> 61 <div class="left"></div> 62 <div class="middle"></div> 63 <div class="right"></div> 64 </div> 65 <div class="foot"></div> 66 </body> 67 </html>
以上是非常簡單的一個響應式布局，僅供參考。
HTML5響應式布局