网页布局分类

自适应布局：

使用固定分割点进行布局，只有几种固定状态，如：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>