css媒體查詢Media queries

什麼是媒體查詢

媒體查詢(Media queries) 根據不同的裝置類型或者特定的特征和裝置參數設定不同的css樣式

使用媒體查詢的第一步就是要先确定裝置類型

• all 适用于所有裝置(預設選項)
• print 列印預覽模式
• screen 螢幕
• speech 語音合成器

其次是确定媒體特性

媒體特性是指輸出裝置，或是浏覽環境的具體特征的值是否存在,值為多少。媒體特性應該是和裝置類型息息相關的,不同的裝置類型應該有不同的媒體特性

以下為部分媒體特性(詳見官網)

• height
  • 視窗（viewport）的高度
• width
  • 視窗（viewport）的寬度，包括縱向滾動條的寬度
• aspect-ratio
  • 視窗（viewport）的寬高比
• orientation
  • 視窗（viewport）的旋轉方向

舉一些例子

@media {
            body {
                background-color: lightblue;
            }
        }
           

表示比對于所有裝置、所有的特性值

這裡我想表達的是裝置類型預設是全部,媒體特性不是必填的.但是當我們寫媒體查詢表達式的時候,确定裝置類型總應該是第一步

@media (height: 360px) {
            body {
                background-color: red;
            }
        }
           

表示比對于所有裝置、viewport的高度等于360px

定位裝置類型

@media screen {...}
@media screen,print  {...}
           

同時定位裝置類型和媒體特性的值

很多時候我們需要根據裝置類型和媒體特性聯合構造複雜的媒體查詢,這個時候需要用到邏輯操作符

邏輯操作符

• and

  • and

    操作符用于将多個媒體查詢規則組合成單條媒體查詢，當每個查詢規則都為真時則該條媒體查詢為真，它還用于将媒體功能與媒體類型結合在一起。

  • @media screen and (width: 1050px) { ... }
    // 表示裝置類型為screen 視口寬度為1050px
               

• not

  • not

    運算符用于否定媒體查詢,如果使用not運算符，則還必須指定媒體類型。

  • @media not screen and (width:300px) {
                body {
                    background-color: red;
                }
            }
    // 表示裝置類型為screen 視口寬度為300px的除外
               

• only
  • only關鍵字的作用是讓那些不支援媒體查詢表達式但是能夠讀取媒體類型的裝置的浏覽器将表達式的樣式隐藏起來

  • // 沒有例子 我和ie浏覽器隻能選擇一個
               

媒體查詢的引入方式

内聯樣式引入

<style media="width:300px">
       // css...
 </style>
           

外聯樣式引入

參見

HTML5與CSS3權威指南

MDN Web 文檔