響應式布局最簡單的就是用css3來實現(xiàn)我舉一個最簡單的例子下面是html代碼lt！DOCTYPE html lthtml lang=quotenquot lthead ltmeta charset=quotUTF8quot ltmeta name =quotviewportquot content=quotwidth = devicewidth，initial。

腳手架全局樣式，響應式的12列柵格布局系統(tǒng)記住Bootstrap在默認情況下并不包括響應式布局的功能因此，如果你的設計需要實現(xiàn)響應式布局，那么你需要手動開啟這項功能基礎CSS包括基礎的HTML頁面要素，比如表格table。

footerltdiv id=quotfooterquotfooterltdivlt！end footerltbodylthtml通過上面代碼可知它是通過@media媒介查詢判斷來執(zhí)行的CSS樣式，也就是說如果我要做一個響應式布局網(wǎng)站，同時兼容手機平板PC的話。

如何用CSS做響應式布局呢1在HTML頭部添加以下代碼，用來顯示兼容移動設備的顯示效果ltmeta name=quotviewportquot content=quotwidth=devicewidth，initialscale=1，minimumscale=1，maximumscale=1，userscalable=noquot 參數(shù)。

這樣子就可以根據(jù)不同尺寸裝置來進行響應式的布局為了更好的顯示效果，我們往往還要格式化一些CSS屬性的初始值 * 禁用iPhone中Safari的字號自動調(diào)整 * webkittextsizeadjust * 設定HTML5元素。

第二步HTML結(jié)構(gòu) 在這個例子里，我有一個包括頭部內(nèi)容側(cè)邊欄和頁腳的基本頁面布局頭部有固定的高度180像素，內(nèi)容容器是600像素而側(cè)邊欄是300像素第三步媒介查詢Media Queries CSS3 Media Query媒介查詢是響應。

4瀏覽器支持令人遺憾的是，瀏覽器的支持度還未盡人意，未來在UA上獲取更多支持才是Grid發(fā)展的根本框架搭建好，才僅僅是響應式的開始但是俗語有云Well begun is half done 響應式從做好的布局開始騰訊ISUX。

響應式布局就是網(wǎng)頁會根據(jù)上網(wǎng)設備的屏幕大小而自我調(diào)整網(wǎng)頁的布局聽著跟木有解釋一樣，我舉個例子你以全屏訪問亞馬遜網(wǎng)站，然后在慢慢縮小瀏覽器會發(fā)現(xiàn)有一些東西專業(yè)點說是DOM元素不見了，這就是響應式設計的一種。

1響應式網(wǎng)頁結(jié)構(gòu) 首先，我們先來看下上面案例展示的html結(jié)構(gòu)，如下圖所示可以說這是一個很典型的博客模版結(jié)構(gòu)一個wrapper容器包含了頭部內(nèi)容側(cè)欄底部2Meta標簽 其次就需要我們針對移動設備加入這個meta標簽。

可切換的固定布局彈性布局混合布局都是目前可被采用的響應式布局方式其中可切換的固定布局的實現(xiàn)成本最低，但拓展性比較差而彈性布局與混合布局效果具響應性，都是比較理想的響應式布局實現(xiàn)方式只是對于不同類型的。

flex稱為彈性布局，當父元素設置為flex值后子元素會自動成為其成員，再通過設置屬性值來實現(xiàn)各種布局效果例通過給父元素設置justifycontent屬性實現(xiàn)水平垂直居中效果通過Flex可以簡便完整響應式地實現(xiàn)各種頁面布局隨著瀏覽。

我們在上面了解了什么是響應式布局，那在我們的實際項目中應該怎么去設計呢在以往我們設計網(wǎng)站的時候都會受到不同瀏覽器的兼容性的困擾，還要來個不同尺寸設備，我們該怎么淡定下來呢有需求就會有解決方案，說到響應式布局。

例如 二響應式的概念應該是覆蓋了自適應，但是包括的東西更多了響應式布局可以根據(jù)屏幕的大小自動的調(diào)整頁面的展現(xiàn)方式，以及布局響應式布局的一些技術點紀錄。

也就是一半colsm6 代表在平板上也顯示div占當前行的一半colxs12 代表在手機端顯示為當前行的百分之百填充3還有其他方式，如JQuery和專門做響應式的JS文件，比如nicebox均能實現(xiàn)自適應效果，實現(xiàn)響應式布局。

響應式布局，通過不同的分辨率顯示不同的css樣式 就是兩套模板，只是根據(jù)pc端和手機端的訪問模式進行判斷，然后選擇是用哪個模板如果想pc端和手機端樣式相同的話，那就是css樣式寫一套，不要響應式布局而你說的背景。

可以通過響應式布局來實現(xiàn)內(nèi)容隨著屏幕比例變化而變化，下面列出三個簡單的響應式方法例如使用flex布局flex布局的使用 或者把元素的大小改為百分比單位百分比單位的使用 又或者使用vh單位和vw單位，他們是基于顯示屏的長寬比來。