在開發的過程中，響應式的**是目前很常用的布局方式，可以在pc端 pad端以及手機端設定各自的樣式，很好的提公升了使用者的體驗，接下來博主就以自己的經驗對響應式布局的知識點進行總結。
1、什麼是響應式布局
響應式網頁設計就是乙個**能夠相容多個終端-而不是為每個終端做乙個特定的版本。打個比方來說：現在社會有很多響應產品，例如摺疊沙發，折疊床等等，當我們需要把沙發放到乙個角落的時候，此刻沙發就好比div吧，而角落裡的某個地方就好比父元素，由於父元素空間的改變，我們不得不調整div,讓它能夠依然放在角落裡。在專案中你會遇到不同的終端，由於終端解析度不同，所以你要想讓使用者體驗更好，就必要讓你的頁面能夠相容多個終端。
2、三大技術成分
flexible grid layout 彈性網格布局
flexible image 彈性
media queries **查詢
3、優點
**、設計、**、內容都只需要乙份
多出來的工作量只是js指令碼、css樣式做一些改動
4、缺點
5、布局及設定meta標籤
當建立乙個響應式**，或者非響應式**變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完成了非響應式那麼我在去新增**查詢（media query)和響應式**。這種操作更容易實現響應式特性。
當你完成當你已經完成了無響應的**，做的第一件事是在你的 html 頁面，貼上下面的**到和標籤之間。這將設定螢幕按1：1的尺寸顯示，在 iphone 和其他智慧型手機的瀏覽器提供**全檢視瀏覽，並禁止使用者縮放頁面。
6、**查詢(
使用 @media 查詢，你可以針對不同的**型別定義不同的樣式。@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
css語法
例子：
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...