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

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

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

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

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

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

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

2.逗號(hào)分隔

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

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

媒體查詢引入
link 引入方式

@media導(dǎo)入

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

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

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

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

flex-flow 上面兩個(gè)屬性的簡(jiǎn)寫 flex-flow:row wrap 上面兩個(gè)屬性可寫成一行

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

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

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

flex item的6個(gè)屬性
order item元素的順序

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

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

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

flex 上面三個(gè)屬性的簡(jiǎn)寫，注意順序

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

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

2.定義不同屏幕尺寸時(shí)grid不同的css class名稱，比如:
默認(rèn)屏幕尺寸時(shí)使用: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){
    ......
}

限制不同瀏覽器寬度（即不同屏幕尺寸）時(shí)container的固定寬度。同時(shí)設(shè)置不同屏幕尺寸時(shí)，grid對(duì)應(yīng)的css 寬度比例。

4.設(shè)置每個(gè)grid在不同屏幕尺寸時(shí)需要占的格數(shù)。這時(shí)media queries會(huì)在不同屏幕尺寸的大小時(shí)，讓每個(gè)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{
  

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