摘要：頁面自適應(yīng)自適應(yīng)是指頁面內(nèi)容自動適應(yīng)屏幕大小，實現(xiàn)自適應(yīng)的方法有多種簡易場景實現(xiàn)自適應(yīng)浮動頁面居中元素寬度不寫固定而設(shè)置百分比自動匹配大小。后面詳細(xì)介紹柵格系統(tǒng)的實現(xiàn)方式。當(dāng)頁面寬度發(fā)生改變時，每個柵格的大小會自動調(diào)整以適應(yīng)頁面尺寸。

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

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

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

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

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

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

2.逗號分隔

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

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

媒體查詢引入
link 引入方式

@media導(dǎo)入

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.定義不同屏幕尺寸時grid不同的css class名稱，比如:
默認(rèn)屏幕尺寸時使用: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的固定寬度。同時設(shè)置不同屏幕尺寸時，grid對應(yīng)的css 寬度比例。

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

@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{
  

實現(xiàn)效果如下，當(dāng)頁面寬度為正常大小時
當(dāng)頁面寬度小于媒體查詢設(shè)定的最大寬度時