好久沒用媒體查詢了, 今天用突然得去翻資料了.

1: 先說下容易混淆的概念,max-width 和 min-width

(1): 說下響應式的max-width 和 min-width

min-width

div{ miin-width: 1000px}

意思是一個盒子的最小寬度是1000px,
最終效果就是 :
當縮小瀏覽器窗口, 如果此時瀏覽器寬度在1000px以上時, 盒子會自動收縮,
直到縮小到1000px時 則盒子寬度不在自動收縮, 如果此時繼續縮小瀏覽器, 則會出現橫向的滾動條

max-width

div{ max-width: 1000px}

意思是一個盒子的最大寬度是1000px,
最終效果就是 :
當縮小瀏覽器窗口, 如果此時瀏覽器寬度在1000px以上時, 盒子寬度不變始終是1000px的寬, 直到瀏覽器縮小到1000px以下時 盒子則會自動收縮寬度, 知道最小

<1>順便說一嘴min-height max-height

min-height
假設有一個大盒子內有一個小盒子, 大盒子類名 lg , 小盒子類名 sm

      .lg{
        width: 200px;
        min-height: 50px;
        background-color: red;
      }
      .sm{
        width: 150px;
        min-height: 100px;
        background-color: blue;
      }

大盒子設置最小高度 (50) 小于內部的小盒子的最小高度 (100)
效果為大盒子和小盒子高度都為(100)
因為大盒子被小盒子的高度撐了起來

      .lg{
        width: 200px;
        min-height: 100px;
        background-color: red;
      }
      .sm{
        width: 150px;
        min-height: 50px;
        background-color: blue;
      }

大盒子設置最小高度 (100) 小于內部的小盒子的最小高度 (50)
效果為大盒子(100)和小盒子高度都為(50)
互不干擾

max-height

      .lg{
        width: 200px;
        max-height: 100px;
        background-color: red;
      }
      .sm{
        width: 150px;
        max-height: 50px;
        background-color: blue;
      }

大盒子設置最大高度 (100) 內部的小盒子的最大高度 (50)
效果為大盒子(0)和小盒子高度都為(0)
這是最大高度是沒有高度顯示的

(2): 說下媒體查詢的max-width 和 min-width

// max-width

@media (max-width: 960px) {
.four_type_1,.four_type_2,.four_type_3,.four_type_4 {
  width: 100%;
}
.homeMainContent ul li:not(.mediaChangeFontSize){
   font-size: 16px;
 }
}

這里的最大寬度960px, 意思是 在瀏覽器寬度為960px以下時會執行下面的css樣式

  @media (min-width: 1200px) {
  .homeMainContent ul li:not(.mediaChangeFontSize){
     font-size: 18px;
   }
}    

這里最小寬度1200px, 意思是 在瀏覽器寬度為1200px以上時 會執行下面的css

2: and混合寫法

@media (min-width: 960px)and(max-width: 1200px) {
   .homeMainContent ul li:not(.mediaChangeFontSize){
      font-size: 12px;
    }

  .homeMainContent span{
    width: 40%;
  }
}?

最小寬度960px, 最大寬度1200px 意思是 在瀏覽器寬度為960px, 和 1200px 之間時會執行以下的css