響應式**設計：的理念集中建立頁面的排版大小，可以智慧型的根據使用者的行為以及使用裝置的環境（系統平台，螢幕尺寸，螢幕定向等）進行相對應的自適應布局。簡單來說就是***同一頁面在不同螢幕尺寸下有不同的布局。
原理：動態的根據當前螢幕的寬度，動態的改變也買你盒子的寬度，盒子的顯示或者隱藏。。
html響應式布局實現
1、 viewport是網頁預設的寬度和高度，上面這行**的意思是：網頁寬度預設等於螢幕寬度 （width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。
"viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />css3@media 查詢定義和使用：
1、 使用 @media 查詢，你可以針對不同的**型別定義不同的樣式。@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
例如螢幕寬度小於 500 畫素則修改背景顏色(background-color)為紅色。
2、 例如螢幕寬度小於 500 畫素則修改背景顏色(background-color)為紅色。
@media screen and
(max-width
: 300px)
}
768~992之間的為小屏裝置（平板）
992~1200的中等螢幕（桌面顯示器）
大於1200的寬屏裝置（大桌面顯示器）
但是我們也可以根據實際情況自己定義劃分情況。
自適應網頁 響應式布局 彈性布局
1.自適應網頁 1.宣告viewport元標籤 注 width device width 讓寬度為裝置寬度 initial scale 1 設定初始縮放比例 user scalable no 設定使用者是否可以手動縮放 2.使用流式布局 實現方案 float left display inline ...
響應式布局與彈性布局基礎篇
響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用 大勢...
前端布局（流式布局 響應式布局 彈性布局等）
自適應布局的特點是分別為不同的螢幕解析度定義布局，即建立多個靜態布局，每個靜態布局對應乙個螢幕解析度範圍。改變螢幕解析度可以切換不同的靜態區域性 頁面元素位置發生改變 但在每個靜態布局中，頁面元素不隨視窗大小的調整發生變化。可以把自適應布局看作是靜態布局的乙個系列。1 布局特點 螢幕解析度變化時，頁...