CSS3媒體查詢總結

• • • • • 1. 使用媒體裝置
        • 2. 裝置方向
        • 3. 常用特性
        • 4. 查詢條件

媒體查詢能在不同條件下使用不同的樣式，使頁面在不同終端裝置下達到不同的渲染效果。進而實作響應式布局的效果。

除了可以使用自适應viewport（ viewport概念）的方式實作一定的響應式布局的效果，也可以通過對不同媒體裝置更改樣式的方式實作一定的響應式布局的效果。

媒體類型	說明
all	所有媒體類型（預設）
screen	用于電腦螢幕、平闆電腦、智能手機等
print	列印裝置
speech	應用于螢幕閱讀器等發聲裝置

注：tty tv projection handheld braille embossed aural 裝置類型已經被廢棄

1. 使用媒體裝置

• 使用style标簽定義媒體查詢

  // 螢幕裝置适用
  <style media="screen">
  
      div {
          width: 200px;
          height: 200px;
          background-color: #788787;
      }
  </style>
  
  // 列印裝置适用
  <style media="print">
      div {
          width: 100px;
          height: 100px;
          color: #e67e22;
      }
  </style>
  <div>Cheng</div>
             

  在Chrome如何調出列印裝置呢？

  • 快捷鍵方式

    Ctrl + P

  • 手動打開

    打開網頁-> 點選右上角三個小點 -> 打擊列印

可以看到不同裝置适用不同的樣式
           

• 使用link标簽

  <link rel="stylesheet" href="/css/1.css" target="_blank" rel="external nofollow"  media="screen">
  <link rel="stylesheet" href="/css/2.css" target="_blank" rel="external nofollow"  media="print">
  
  <div>
      2
  </div>
             

• CSS規則

  @import

  在css檔案中或者在style标簽開頭寫
  • style标簽中

    <style>
        @import "/css/1.css" screen;
    </style>
               

  • CSS檔案中

    // 1.css檔案中
    @import "/css/practice_01.css" print,speech;
               

  采用此方式避免在HTML頁面中寫很多link标簽

• @media

  之前的方式都是整個CSS樣式應用某些媒體，但是也可以使用@media在樣式表中為某些媒體定義相應的樣式

  <style>
          @media screen {
              div {
                  width: 200px;
                  height: 200px;
                  background-color: #e74c3c;
              }
          }
  
          @media print {
              div {
                  width: 100px;
                  height: 100px;
                  background-color: #3498db;
              }
          }
  </style>
             

2. 裝置方向

使用

orientation

屬性可以定義裝置的方向

屬性值	說明
portrait	豎屏裝置即高度大于寬度
landscape	橫屏裝置即寬度大于高度

使用：

@media screen and (orientation: landscape){
    div {
        width: 200px;
        height: 200px;
        background-color: #e74c3c;
    }
}
           

3. 常用特性

特性	說明
orientation: landscape | portrait	landscape橫屏，portrait豎屏
width	裝置寬度
height	裝置高度
min-width	最小寬度
max-width	最大寬度
min-height	最小高度
max-height	最大高度

4. 查詢條件

可以使用不同條件顯示目前裝置使用的樣式，條件表達式放在括号内

1. 邏輯與

   使用

   and

   連接配接多個條件

   @media screen and (min-width: 400px){
       div {
           width: 200px;
           height: 200px;
           background-color: #e74c3c;
       }
   }
              

   表示：隻有當viewport大于400px時，才可以使用此樣式

1. 邏輯或

   使用

   or

   當兩個條件中一個滿足即可

2. 不使用

   使用

   not

   表示不使用指定樣式，放在條件之前，表示當條件滿足時不使用該樣式，類似于取反操作

3. 排除不支援查詢的浏覽器

   使用

   only

   用于排除不支援查詢的浏覽器
   • 對支援媒體查詢的裝置，正常調用樣式，此時就當only不存在
   • 對不支援媒體查詢的裝置不使用樣式
   • only 和 not 一樣隻能出現在媒體查詢的開始