彈性佈局

1.浮動+百分比佈局

2.FIex佈局 Flex佈局對於設計比較複雜的頁面非常有用,實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變

響應式佈局

Responsive design，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。螢幕尺寸不一樣展示給使用者的網頁內容也不一樣，我們利用媒體查詢可以檢測到螢幕的尺寸（主要檢測寬度），並設定不同的CSS樣式，就可以實現響應式的佈局。

我們利用響應式佈局可以滿足不同尺寸的終端裝置非常完美的展現網頁內容，使得使用者體驗得到了很大的提升，但是為了實現這一目的我們不得不利用媒體查詢寫很多冗餘的程式碼，使整體網頁的體積變大，應用在移動裝置上就會帶來嚴重的效能問題。

響應式佈局常用於企業的官網、部落格、新聞資訊型別網站，這些網站以瀏覽內容為主，沒有複雜的互動。

什麼是響應式

• 響應式開發的目的就是:一個網站能夠相容多種終端
• 移動web開發和響應式開發是必須具備的技能
• 對所有的螢幕無論是手機、PC、平板等等做一些螢幕適配

響應式開發的原理：媒體查詢：

查詢媒介，查詢到當前螢幕(媒介媒體)的寬度，針對不同的螢幕寬度設定不同的樣式來適應不同螢幕。簡單說，你可以設定 不同螢幕下面的不同的樣式，達到適配不同的螢幕的目的。

實現方式：通過查詢screen的寬度來指定某個寬度區間的網頁佈局。也可以使用all就是所有還有就是可以針對於列印print

• 超小螢幕      （移動裝置）         w<768px
• 小屏裝置    768px-992px          768 <= w <992
• 中等螢幕    992px-1200px     992 =< w <1200
• 寬屏裝置    1200px以上      w>=1200

CSS 語法

@media 媒體型別{

}