自適應頁面的實現方式

頁面自適應

自適應是指頁面內容自動適應屏幕大小，實現自適應的方法有多種：

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

CSS3 媒體查詢 media queries

媒體查詢可針對不一樣設備場景使用不一樣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 引入方式

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

@media導入

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

Flex佈局

傳統的佈局方式：浮動+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顯示應有的比例。好比<div class="grid-df-1 grid-sm-12 grid-md-3 grid-lg-6"></div>即該div在默認屏幕尺寸時佔1格，在sm尺寸時佔12格，在md尺寸時佔3格，在lg尺寸時佔6格
代碼示例：

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

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