前端開發並不是一個容易的工作，不僅需要掌握HTML、CSS和JavaScript，針對不同的瀏覽器版本和平台，還需要了解如何設計出跨平台的網站。如今隨着響應式設計的流行，前端開發變得越來越困難，且花費的時間更長。
使用前端框架，有如下好處：
-
- 跨瀏覽器。這一點已被證實。
- 一致性。UI組件，如導航、按鈕、標簽、表單、下拉框、表格……，在設計上保持風格一致。
- 快速開發。你可以快速、容易地構建布局。這些框架都配有詳細的說明文檔。
- 響應式。所有CSS組件及JavaScript插件可以很好地從桌面過渡到移動設備上。
但是本渣認為，如果單憑為了能處理響應式布局沒必要用到網上的響應式框架，
-
- 對於一個新手來說需要花費一定的時間去學習熟悉框架的特性和使用方法；
- 兼容各種設備工作量大，效率低下
- 代碼累贅，會出現隱藏無用的元素，加載時間加長
- 其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
- 一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況
今天我就分享一下自己所謂探索出來的一套響應式布局實現方案，操作方便簡單、時尚且簡約。所用之處，無非爽！爽！爽！新手只需啪啪啪便能自動生成，相當強大，並且很小哦，直接兼容到ie6，本渣渣經過n次測試和運用，媽媽再也不用擔心我不會寫響應式了。
首先，我們先簡單了解一下響應式布局實現邏輯，在以往我們設計網站的時候都會受到不同瀏覽器的兼容性的困擾，還要來個不同尺寸設備，我們該怎么淡定下來呢？有需求就會有解決方案，說到響應式布局，就不 得不提起CSS3中的Media Query（媒介查詢），這可是個好東西，易用、強大、快捷……Media Query是制作響應式布局的一個利器，使用這個工具，我們可以非常方便快捷的制造出各種豐富的實用性強的界面。
1、CSS3中的Media Query（媒介查詢）是什么？[2]
通過不同的媒介類型和條件定義樣式表規則。媒介查詢讓CSS可以更精確作用於不同的媒介類型和同一媒介的不同條件。 媒介查詢的大部分媒介特性都接受min和max用於表達”大於或等於”和”小於或等於”。如：width會有min-width和max-width媒介 查詢可以被用在CSS中的@media和@import規則上，也可以被用在HTML和XML中。通過這個標簽屬性，我們可以很方便的在不同的設備下實現 豐富的界面，特別是移動設備，將會運用更加的廣泛。
2、media query能夠獲取哪些值？
設備的寬和高device-width，device-height顯示屏幕/觸覺設備。
渲染窗口的寬和高width，height顯示屏幕/觸覺設備。
設備的手持方向，橫向還是豎向orientation（portrait|lanscape）和打印機等。
畫面比例aspect-ratio點陣打印機等。
設備比例device-aspect-ratio-點陣打印機等。
對象顏色或顏色列表color，color-index顯示屏幕。
設備的分辨率resolution。
3、語法結構及用法
@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules}
示例一：在link中使用@media：
<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>
上面使用中only可省略，限定於計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件max-device-width是指設備最大寬度。
示例二：在樣式表中內嵌@media：
@media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {srules}
在示例二中，設置了電腦顯示器分辨率（寬度）大於或等於1024px（並且最大可見寬度為989px）；屏寬在 480px及其以下手持設備；屏寬在480px以及橫向（即480尺寸平行於地面）放置的手持設備；屏寬大於或等於480px小於1024px以及垂直放 置設備的css樣式。
從上面的例子可以看出，字符間以空格相連，選取條件包含在小括號內，srules為兼容設置的樣式表，包含在中括號里面。only（限定某種設備，可省略），and（邏輯與），not（排除某種設備）為邏輯關鍵字，多種設備用逗號分隔，這一點繼承了css基本語法。
好了不瞎比比了！直奔主題
說到第一次接觸響應式布局該從一個客戶要求我做一套響應式布局開始。關系到信譽的問題，不能接下了活不干吧，當時時間也特別緊，眼看離項目交期不遠了，怎么辦怎么辦？東問西問，各種百度各種盪，各種交流各種學習。結果接觸了幾個響應式框架之后，感覺真是太神奇了，但是但是問題又來了！框架的css文件呀、js呀、比我自身寫的還多，這無非就一下把我給貶值了。
終於終於。。。。。。。好了真不瞎比比了。下載一個
Dreamweaver cs6！ 這家伙新加的html5流媒體網絡布局功能就是我們想要的（響應式布局）。
別眨眼，新手也可以速成！
第一步，新建一個流體網絡布局:
第二步，把相關文件保存到自己項目里
再看看文件多大，根據自己的需求可適當的刪除或者壓縮。
關鍵代碼：
現在我們跑起來，到模擬環境下看看效果：
（某果6p下的模擬效果）
（最早又挺普遍的小屏）
（ipad 3/4 環境下）
（萬惡的ie6 以前已測 現拿ie7代替 不爽可自己試）
話不多說，自己多試多練！