響應(yīng)式布局最簡(jiǎn)單的就是用css3來(lái)實(shí)現(xiàn)我舉一個(gè)最簡(jiǎ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è)計(jì)需要實(shí)現(xiàn)響應(yīng)式布局，那么你需要手動(dòng)開啟這項(xiàng)功能基礎(chǔ)CSS包括基礎(chǔ)的HTML頁(yè)面要素，比如表格table。

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

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

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

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

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

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

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

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

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

我們?cè)谏厦媪私饬耸裁词琼憫?yīng)式布局，那在我們的實(shí)際項(xiàng)目中應(yīng)該怎么去設(shè)計(jì)呢在以往我們?cè)O(shè)計(jì)網(wǎng)站的時(shí)候都會(huì)受到不同瀏覽器的兼容性的困擾，還要來(lái)個(gè)不同尺寸設(shè)備，我們?cè)撛趺吹ㄏ聛?lái)呢有需求就會(huì)有解決方案，說(shuō)到響應(yīng)式布局。

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

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

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

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