響應式布局的見解，響應式布局見解

響應式布局的見解，響應式布局見解

　　　　對於響應式布局呢，我相信每個人都有自己不同的見解，有的呢認為響應式布局就是一種網頁，但是我們真正的響應式布局是可以隨網頁的大小，從而自己調節的一種網頁，在PC端的時候網頁上的所有的東西都呈一排顯示，或者是分為有兩個側欄，或一個側欄，還有主題內容組成的，在PC端的時候是整體一排顯示的，但是隨著螢幕的縮小布局會變小在手機端的話，可能原來豎著排的按鈕就會橫排過來.....

　　　　那麼編寫響應式布局的幾種方法有：

　　　　1.首先大家應該認識midia這個單詞吧，media呢在英文中就是媒體的意思，這是就有人問media有什麼屬性呢？它可以幹什麼呢？其實media呢有一個語句就是@media  screen  and(min-width:) (max-width);這個語句呢就是響應式布局的基礎應用，給它賦予不同的值的話，它就可以在不同的螢幕上顯示了，這樣她就可以實現響應式布局的效果了，但是由於瀏覽器的相容問題，它依舊存在的許多的毛病這怎麼辦呢？這時就涉及到了media的一些其它的屬性了，總之一句話media還是很強大的，用它也可以實現響應式布局。

　　　　2.其次呢是響應式布局的另一種實現的方法以百分比的形式給寬度，這樣的布局也可以實現響應式布局的效果隨著螢幕的放大縮小布局也會跟著放大縮小的，這種布局的方法雖然可以實現響應式布局但是現在在我的的工作，或是公司中已經很少推薦使用這種布局的方式了，雖然說這種布局的方法簡單，但同時它也存在著很大的問題已經跟不上時代的發展了，而且這樣布局的代碼量相對來說代碼多、視覺不美觀，這樣在我們做項目的時候有很大的影響，所以儘管這種布局的方法是簡單但是我們現在已經很少有公司去用這種的布局方法了。

　　　　3.最後呢還有一種方法也可以做響應式布局，那就是用bootstrap的柵欄，在最大螢幕就用col-lg-，在平板顯示的話就適用col-sm-，在最小螢幕就適用col-xs-，在PC端顯示的話就用的col-md-，在這個架構中，將一個容器分成了十二個格子，這種布局的方法也具有響應式布局的效果，柵格針對不同的裝置設定了不同的樣式，比如，在一個元素上使用了兩個class，那麼他會根據裝置螢幕的大小來選擇合適的樣式，如果螢幕的大小不在類的範圍內那麼他就會忽略這兩個類；而柵欄的每個樣式都是在row的基礎上進行，可以通過不同組合的類來達到在不同裝置上顯示的期望效果，但是呢這個布局是以做手機app為主的雖然說他也可以實現響應式布局的效果，但是我個人認為這種布局的架構不是很好，但是總體來說沒有什麼小毛病。

　　　　以上呢就是我個人對響應式布局的見解，這隻是我自己的一些見解如果有什麼不對的地方請大家多多指點，謝謝大家！