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;
  }
}