摘要：頁面自適應自適應是指頁面內容自動適應屏幕大小，實現自適應的方法有多種簡易場景實現自適應浮動頁面居中元素寬度不寫固定而設置百分比自動匹配大小。后面詳細介紹柵格系統的實現方式。當頁面寬度發生改變時，每個柵格的大小會自動調整以適應頁面尺寸。

1.簡易場景實現自適應：浮動、頁面居中、元素寬度不寫固定而設置百分比自動匹配大小。這樣在頁面寬度發生變化時，能利用以上特性實現簡易的自適應效果。
2.如果實際開發中有復雜場景的需求，一般通過編寫多套CSS代碼，然后用媒體查詢技術，讓頁面根據不同屏幕尺寸來加載不同代碼模塊以實現適配不同屏幕的目的。這種方式需要編寫多套代碼，雖然工作量大，但對于不同屏幕尺寸的設備都有多帶帶一套CSS代碼，維護起來更方便。
3.響應式布局，響應式布局是指根據不同屏幕尺寸自動調整頁面顯示效果實現自適應(也要用到媒體查詢技術)。響應式布局一般有柵格系統布局，flex布局。bootstrap框架的核心就是柵格系統。 （后面詳細介紹柵格系統的實現方式）。

媒體查詢可針對不同設備場景使用不同css，一般柵格系統和多套代碼邏輯匹配頁面是都要用媒體查詢來確定頁面大小。媒體查詢技術的原理：通過匹配不同屏幕設備的特征,讓不同特征下的CSS代碼生效。

常用匹配特征 media features
width/height: 瀏覽器寬高
max-width： 表示小于最大寬度時生效
min-width： 表示大于最小寬度時生效
device-width/device-height: 設備屏幕分辨率寬高
resolution: 設備分辨率
orientation：portrait(縱向),高度大于等于寬度時，landscape(橫向),高度小于寬度時

特征匹配操作符
當媒體類型匹配且表達式為真的時候，對應style就會起作用:
1.and

@media (min-width: 700px) and (orientation: landscape) {
 ...
 }

表示最小寬度限制在700px，當瀏覽器寬度大于等于700px且為橫向時CSS代碼生效

2.逗號分隔

@media (max-width: 500px), handheld and (orientation: landscape) {
 ...
 }

表示最大寬度限制在500px，當瀏覽器寬度小于等于500px或者手持設備且為橫向時生效

媒體查詢引入
link 引入方式

@media導入

@media screen and (max-width: 990px){
    .container{
        background: orange;
    }
}

傳統的布局方式：浮動+position定位+display屬性對簡單布局需求可輕易實現，但對于絕對居中這種常見的場景的實現卻不太容易，同時浮動布局也會產生一些副作用效果。Flex彈性布局，用來為盒狀模型提供最大的靈活性，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持。
flex的基本概念：
1.任何一個容器元素都能指定成flex容器
塊級元素：display:flex
行內元素也能使用flex布局: display:inline-flex;
2.使用Flex布局的元素稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
容器中有兩個軸線，水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

3.flex container容器的6個屬性
flex-direction 方向 row(行排列默認)/row-reverse/column(縱向)/column-reverse
flex-direction:row時主軸為X方向/column時主軸為Y方向

flex-wrap 換行 nowrap(默認不換行)/wrap/

flex-flow 上面兩個屬性的簡寫 flex-flow:row wrap 上面兩個屬性可寫成一行

justify-content 主軸對齊方式 :
*space-between(多余空間放中間)
space-around(多余空間放兩邊)
flex-start(item元素靠近主軸起點)
flex-end(item元素靠近主軸終點)
center(item元素居中)*

align-items 交叉軸對齊方式
*stretch伸展(默認值，前提是item元素寬/高度不確定)，所有元素寬/高度都撐滿整個container
flex-start(item元素靠近交叉軸起點)
flex-end(item元素靠近交叉軸終點)
center(item元素居中)
baseline (item元素第一行文字的baseline對齊)*

align-content 多軸線在交叉軸方向的對齊方式（多行/多列），為什么不是主軸，因為已經換行了是多行啊。
flex-start item靠近交叉軸起點
flex-end item元素靠近交叉軸終點
center item元素靠近交叉軸中心點
space-between item元素與交叉軸兩端對齊
space-around item元素每根軸線兩側間隔相等，軸線之間的間隔比軸線與邊框的間隔大一倍
stretch (默認值)item元素占滿整個交叉軸

flex item的6個屬性
order item元素的順序

flex-grow 有多余空間item元素分配比例，默認為0即不放大

flex-shrink 空間不夠時item元素收縮比例，默認為1即縮小一倍

flex-basis 指定item元素在分配多余空間之前占用主軸大小main size（px/%）,默認auto即項目本身大小

flex 上面三個屬性的簡寫，注意順序

align-self 指定單個item元素自身的對齊方式，可覆蓋align-item屬性，默認auto繼承align-item的屬性
*flex-start
flex-end
center
baseline
stretch*

柵格系統是一種自適應頁面的布局方式，用于通過一系列的行（row）與列（column）的組合來創建頁面布局，實際要展示的內容可以放入這些創建好的柵格中。當頁面寬度發生改變時，每個柵格的大小會自動調整以適應頁面尺寸。
柵格系統的實現原理：
1.將頁面中每行布局分成12個等份，每一等份即一個grid。1個grid占1/12，2個grid占2/12，依此類推。頁面上所有grid由父容器container包裹，所有grid設置浮動或者設置成行內元素保持在一行，一行排列不下時自動換行。所有grid設置成border-box。

2.定義不同屏幕尺寸時grid不同的css class名稱，比如:
默認屏幕尺寸時使用:grid-df-1,grid-df-2
屏幕小尺寸使用：grid-sm-1,grid-sm-2
屏幕中等尺寸使用：grid-md-1,grid-md-2
屏幕大尺寸使用：grid-lg-1,grid-lg2

3.用媒體查詢

@media screen and (min-width:768px){
    ......
}

限制不同瀏覽器寬度（即不同屏幕尺寸）時container的固定寬度。同時設置不同屏幕尺寸時，grid對應的css 寬度比例。

4.設置每個grid在不同屏幕尺寸時需要占的格數。這時media queries會在不同屏幕尺寸的大小時，讓每個grid顯示應有的比例。比如

@media screen and (min-width:768px){
#container{
width:768px;
}
             .grid-sm-1{
                width:8.3333333%;
            }
            .grid-sm-2{
                width:16.666666%;
            }            
            .grid-sm-3{
                width:25%;
            }            
            .grid-sm-4{
                width:33.333333%;
            }            
            .grid-sm-5{
                width:41.666666%;
            }           
            .grid-sm-6{
                width:50%;
            }         
            .grid-sm-7{
  

實現效果如下，當頁面寬度為正常大小時
當頁面寬度小于媒體查詢設定的最大寬度時