一個菜鳥所喜歡用的響應式佈局，操做方便簡單、時尚簡約，適合新手！（一個Dreamweaver cs6生成響應式佈局）

 

    前端開發並非一個容易的工做，不只須要掌握HTML、CSS和JavaScript，針對不一樣的瀏覽器版本和平臺，還須要瞭解如何設計出跨平臺的網站。現在隨着響應式設計的流行，前端開發變得愈來愈困難，且花費的時間更長。

    使用前端框架，有以下好處：

• • 跨瀏覽器。這一點已被證明。
  • 一致性。UI組件，如導航、按鈕、標籤、表單、下拉框、表格……，在設計上保持風格一致。
  • 快速開發。你能夠快速、容易地構建佈局。這些框架都配有詳細的說明文檔。
  • 響應式。全部CSS組件及JavaScript插件能夠很好地從桌面過渡到移動設備上。

    可是本渣認爲，若是單憑爲了能處理響應式佈局不必用到網上的響應式框架，

1. 1. 對於一個新手來講須要花費必定的時間去學習熟悉框架的特性和使用方法；
   2. 兼容各類設備工做量大，效率低下
   3. 代碼累贅，會出現隱藏無用的元素，加載時間加長
   4. 其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
   5. 必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況

     今天我就分享一下本身所謂探索出來的一套響應式佈局實現方案，操做方便簡單、時尚且簡約。所用之處，無非爽！爽！爽！新手只需啪啪啪便能自動生成，至關強大，而且很小哦，直接兼容到ie6，本渣渣通過n次測試和運用，媽媽不再用擔憂我不會寫響應式了。

     首先，咱們先簡單瞭解一下響應式佈局實現邏輯，在以往咱們設計網站的時候都會受到不一樣瀏覽器的兼容性的困擾，還要來個不一樣尺寸設備，咱們該怎麼淡定下來呢？有需求就會有解決方案，說到響應式佈局，就不 得不提起CSS3中的Media Query（媒介查詢），這但是個好東西，易用、強大、快捷……Media Query是製做響應式佈局的一個利器，使用這個工具，咱們能夠很是方便快捷的製造出各類豐富的實用性強的界面。

    一、CSS3中的Media Query（媒介查詢）是什麼？^[2] 

    經過不一樣的媒介類型和條件定義樣式表規則。媒介查詢讓CSS能夠更精確做用於不一樣的媒介類型和同一媒介的不一樣條件。 媒介查詢的大部分媒介特性都接受min和max用於表達」大於或等於」和」小於或等於」。如：width會有min-width和max-width媒介 查詢能夠被用在CSS中的@media和@import規則上，也能夠被用在HTML和XML中。經過這個標籤屬性，咱們能夠很方便的在不一樣的設備下實現 豐富的界面，特別是移動設備，將會運用更加的普遍。

    二、media query可以獲取哪些值？

    設備的寬和高device-width，device-height顯示屏幕/觸覺設備。

    渲染窗口的寬和高width，height顯示屏幕/觸覺設備。

    設備的手持方向，橫向仍是豎向orientation（portrait|lanscape）和打印機等。

    畫面比例aspect-ratio點陣打印機等。

    設備比例device-aspect-ratio-點陣打印機等。

    對象顏色或顏色列表color，color-index顯示屏幕。

    設備的分辨率resolution。

    三、語法結構及用法

    @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代替 不爽可本身試）

 

   話很少說，本身多試多練！