1.響應式佈局：

    響應式佈局是根據瀏覽器寬度，解析度，橫屏，豎屏等情況來自動改變元素展示的一種佈局方式，一般可以使用柵格方式來實現，一般有兩種思路，一種是桌面端瀏覽器優先，擴充套件到移動端瀏覽器適配，另一種是以移動端優先，擴充套件到桌面瀏覽器適配。由於移動端網路和計算機資源相對較少，一般推薦從移動端擴充套件到桌面瀏覽器適配。

2.螢幕適配佈局：

    在移動端結局內容按照不同螢幕大小自動等比例縮放的一種佈局計算方式，一般只在移動端使用。

    目前用的最成熟的是rem：計算rem一般有兩種方法：

        1.1rem = 螢幕的寬度*螢幕的解析度/10  （這樣1rem正好是螢幕寬度的10%） 

        2.1rem = 螢幕寬度/320*10（假如320畫素的寬度為基準  這樣在寬度為320px的螢幕表示10px 在640px螢幕就是20px）

        計算螢幕的寬度一般使用js獲取。

   還有一種更加好用的但是不太成熟的（vh vw vmax vmin）的方案。

另一種：flex佈局（彈性佈局）

相容情況

IE10及以上、ios9及以上、android4.4及以上版本支援

特點

1. 預設所有子元素都會在一行中顯示，即使給子元素一個很大的寬度
2. 父級加了這條屬性，子級的float、vertical-align就會失效
3. 如果相容低版本的機型要加字首-webkit-，包括後面講的所有屬性

容器屬性（父元素樣式） 具體看菜鳥教程或阮一峰的教程，這裡說一下一些重點知識。

1. flex-direction：子元素排列方向（主軸的方向，如果設定了column，則意味著主軸旋轉了90度）
2. flex-wrap：換行方式
3. flex-flow：以上兩種方式的簡寫
4. justify-content：水平對齊方式（子元素在主軸上的對齊方式）
5. align-items：垂直對齊方式（子元素在交叉軸上的對齊方式）
6. align-content：多行垂直對齊方式（多根軸線的對齊方式）

專案屬性（子元素樣式）

1. order：排列位置 //如果有兩個的值是相等，按書寫順序排列

2. flex-grow：擴充套件比例 
   flex-grow 當父級的寬度大於所有子元素寬度之和時，根據父級的剩餘空間，設定子元素的擴充套件比例（設定後，元素給的固定寬度會被覆蓋）它是一個係數 
   預設為0，即如果存在剩餘空間，也不擴充套件 
   剩餘空間 
   剩餘空間=父級的寬度-所有子元素的寬度和 
   注意：如果沒有設定初始寬度，也沒有內容，則預設為0，否則為內容的寬度。例如設定了文字，會撐開有初始寬度。

           子元素寬度計算公式
               子元素的寬度=（父級的寬度-所有子元素的寬度和）/所有子元素的flex-grow屬性值之和*子元素的flex-grow屬性值+子元素初始寬度
   

   • 1
   • 2
   • 3

3. flex-shrink：收縮比例 
   flex-shrink 當所有子元素寬度之和大於父級寬度的時候，根據超出的空間，設定子元素的收縮比例（設定後，元素給的固定寬度會被覆蓋）它是一個係數 
   預設為1，如果給個0的話，就不會收縮 
   超出空間 
   超出空間=所有子元素的寬度和-父級的寬度

           子元素寬度計算公式
               1、算出超出空間，所有子元素的寬度和-父級的寬度
               2、子元素的初始寬度*子元素的flex-shrink值
               3、算出第二步所有結果的和
               4、每個子元素的第二步/第三步*第一步
               5、子元素的初始寬度-第四步
   

   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
4. flex-basis：元素的大小
5. flex：以上三個屬性的簡寫
6. align-self：單獨的垂直對齊方式（交叉軸方向上）