什么是響應式 Web 設計
響應式 Web 設計是一個讓用戶通過各種尺寸的設備瀏覽網站獲得良好的視覺效果的方法。例如，您先在計算機顯示器上瀏覽一個網站，然后在智能手機上瀏覽，智能手機的屏幕尺寸遠小於計算機顯示器，但是你卻沒有感覺到任何差別，兩者的用戶體驗幾乎一樣，這說明這個網站在響應式設計方面做得很好。
我們已經在我們的流動布局實例中應用了響應性能，並請您在不同的屏幕尺寸下進行瀏覽。您可以通過 Chrome 或 FireFox 的窗口大小調整的擴展來調整瀏覽器。
響應式 Web 設計工作原理
為了應用響應式 Web 設計，您需要創建一個包含適應各種設備尺寸樣式的 CSS。一旦頁面在特定的設備上加載，該頁面上使用了各種字體和 Web 開發技術，比如媒體查詢（Media Queries），此時，會先檢測設備的視口大小，然后加載特定於設備的樣式。
首先要寫好框架：
做出來一個頁面布局
其次考慮小一點的窗口如何轉換布局就利用到了media。
手機上面的布局就應該迎合手機用戶的體驗感將頁面設計為從上向下的布局狀態
下面是一個簡單的響應式布局框架代碼！
以上就是各種狀態下的排版方式！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=0，user-scalable=no"> <title></title> <style> *{ margin: 0px; padding: 0px; font-size: 60px; text-align: center; } .head, .container, .footing{ margin: 10px auto; } .head{ height:100px; background-color: chocolate; } .left{ background-color: brown; } .right{ background-color: blueviolet; } .main{ background-color: aqua; } .footing{ height: 100px; background-color: blanchedalmond; } @media screen and (min-width: 960px){ .head, .container, .footing{ width: 960px; } .left, .main, .right{ float: left; height: 500px; } .left, .right{ width: 200px; } .main{ margin-left: 5px; margin-right: 5px; width: 550px; } .container{ height: 500px; } .footing{float:none;} } @media screen and (min-width: 600px) and (max-width: 960px){ .head, .container, .footing { width: 600px; } .left, .main{ float: left; height: 400px; } .right{ display: block; float:left; height: 200px; width: 100%; margin: 5px auto 5px; } .left{ width: 160px; } .main{ width: 435px; margin-left: 5px; } .container{ height: 400px; } } .footing{overflow: auto;} @media screen and (max-width: 600px){ .head, .container, .footing{ width: 400px; } .main{ margin-top: 10px; margin-bottom: 10px; width: 400px; height: 420px; float: left; } .left, .right{ display: block; height: 100%; width: 100%; float: left; margin-bottom: 10px; } .container{ width: 400px; height: 420px; } .footing{ overflow: hidden;} } </style> </head> <body> <div class="head">1</div> <div class="container"> <div class="left">2</div> <div class="main">3</div> <div class="right">4</div> </div> <div class="footing">5</div> </body> </html>