網頁佈局分類

自適應佈局：

使用固定分割點進行佈局，只有幾種固定狀態，如：768px,996px,1200px，元素位置變化大小不變；

響應式佈局：

每一個主流分辨率下都有一個佈局樣式，雖然差別較小，但也有幾百種不一樣狀態，元素位置大小都會變化。

 

佈局按CSS單位劃分

1. 固定佈局fixed        使用像素px             　　               穩定、可控（留白）
2. 流式佈局 fluid        使用寬度%，高度px限死              寬度適應各類設備（只屏幕寬度自適應）
3. rem佈局                 使用rem     結合媒體查詢              適應不一樣分辨率（分辨率自適應）

 

佈局按css屬性劃分

1. 柵格佈局                   利用CSS屬性   浮動與寬度百分比實現      conatiner  row  column
2. 伸縮佈局flex            使用CSS3屬性  display：flex      　　        適用不一樣設備切換不一樣排版（移動端）

 

佈局按頁面樣式佈局

1. 自適應佈局             使用媒體查詢，寫多個固定佈局，隨屏幕寬度用特定固定佈局樣式
2. 響應式柵格佈局      利用CSS屬性 浮動與寬度百分比  結合媒體查詢實現
3. 響應式佈局             使用媒體查詢@media   適用不一樣尺寸切換不一樣樣式、排版（PC與移動端共用）

 

流式佈局細分

1. 瀑布流佈局             寬度固定，高度良莠不齊
2. 雙飛翼佈局             中間自適應，兩側固定（浮動佈局）
3. 聖盃佈局                 中間固定，兩邊自適應

 

響應式rem佈局：rem結合媒體查詢

html {font-size : 20px; }

@media only screen and (min-width: 401px){

    html {font-size: 25px !important; }

}

@media only screen and (min-width: 481px){

    html {font-size: 30px !important; }

}

@media only screen and (min-width: 641px){

    html {font-size: 40px !important;}

}

 

響應式柵格佈局：container row column 嵌套結合媒體查詢 （每行12列）

container中嵌套row，row中嵌套column。

將column設爲浮動以及對應的寬度百分比。

.container {

  padding: 0 15px;

  margin: 0 auto;

}

  @media (min-width: 768px) {

  .  container {width: 750px;}

   }

  @media (min-width: 992px) {

 .   container {width: 970px;}

   }

  @media (min-width: 1200px) {

  .container {width: 1170px;}

  }

    .row{

      padding: 0 15px;

    }

    .col-xs-x, .col-sm-x, .col-md-x, .col-lg-x {

       padding: 0 15px;

    float: left;

    width: xx%;

 }

<div class="container">

　　<div class="row">

          <div class=" col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>

          <div class=" col-xs-12 col-sm-6 col-md-8 col-lg-3"></div>

　　</div>

</div>