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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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