CSS3媒体查询实操（min-width和max-width）

说明：bootstrap

需求：

1.在最大的div里面有div1 /div2 /div3。

   其中，div1和div2是一样的内容块，里面有图片和文字信息。 div3是侧栏，内容和高度不变。如下图。

2.当web窗口变小时，div1和div2里面的内容会自适应把内容往下排列，如下图。

3.需要的最终效果是

 

 

 

代码如下：

如：对文字大小
.station-msg-basic-layout02-val {
  @media (max-width: 1650px) {
    font-size:16px;
    color:#00031a;
    padding-right: 5px;
    padding-top: 5px;
    font-weight: bold;
  } ／／窗口小于等于1650px，文字字号16px
  @media (min-width: 1651px) {
    font-size:30px;
    color:#00031a;
    padding-right: 10px;
    padding-top: 5px;
  }／／窗口大于等于1651px，文字字号30px
  @media (max-width: 980px) {
    font-size:30px;
    color:#00031a;
    padding-right: 10px;
    padding-top: 5px;
  }／／窗口小于等于980px，文字字号30px
}

 如：对图片大小

.svg-class {
  @media (max-width: 1650px) {
    width: 24px;
    height: 24px;
  }
  @media (max-width: 980px) {
    width: 60px;
    height: 60px;
  }
  @media (min-width: 1651px) {
    width: 60px;
    height: 60px;
  }
}