響應式布局是ethan marcotte在2023年5月份提出的乙個概念，簡而言之，就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。
優點
面對不同解析度裝置靈活性強
能夠快捷解決多裝置顯示適應問題
缺點
相容各種裝置工作量大，效率低下
**累贅，會出現隱藏無用的元素，載入時間加長
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果一定程度上改變了**原有的布局結構，會出現使用者混淆的情況
1.布局及設定meta標籤
user-scalable屬性能夠解決ipad切換橫屏之後觸控才能回到具體尺寸的問題。media query 是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如乙個終端的解析度小於980px，那麼可以這樣寫
@media screen and (max-width:980px)
#content
#footer
}這裡面的樣式會覆蓋掉之前所定義的樣式。
假如我們要相容ipad和iphone檢視，我們可以這樣設定：
/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}
到目前為止，開發人員用到的字型單位大部分都是畫素，雖然畫素在普通**上是ok的，但是我們仍然需要響應式字型。乙個響應式的字型應關聯它的父容器的寬度，這樣才能適應客戶端螢幕。
css3引入了新的單位叫做rem,和em類似但對於html元素，rem更方便使用。
rem是相對於根元素的，不要忘記重置根元素字型大小：
html
完成後，你可以定義響應式字型：
@media (min-width:640px)}
@media (min-width:960px)}
@media (min-width:1200px)}
不理解rem的童鞋，在這裡給大家推薦一篇寫的不錯的部落格(
#head
#content
#wrap img
如此設定後id為wrap內的會根據wrap的寬度改變已達到等寬擴充，height為auto的設定是為了保證原始的高寬比例，以至於不會失真。
#log a
background-size是css3的新屬性，用於設定背景的大小，有兩個可選值，第乙個值用於指定背景圖的width,第2個值用於指定背景圖的height,如果只指定乙個值，那麼另乙個值預設為auto。
background-size:cover; 等比擴充套件來填滿元素
background-size:contain; 等比縮小來適應元素的尺寸
響應式布局詳解（優缺點）
一 什麼是響應式布局?響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移...
響應式優缺點
響應式，對於這三個字，想必程式設計師都不陌生，響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。圖一 圖二 圖一與圖二都是用的同樣的布局，卻可以在不同的裝置上有不...
響應式資料及彈性布局
響應式 設計 的理念集中建立頁面的排版大小，可以智慧型的根據使用者的行為以及使用裝置的環境 系統平台，螢幕尺寸，螢幕定向等 進行相對應的自適應布局。簡單來說就是 同一頁面在不同螢幕尺寸下有不同的布局。原理 動態的根據當前螢幕的寬度，動態的改變也買你盒子的寬度，盒子的顯示或者隱藏。html響應式布局實...