詳解css媒體查詢

ASCll發表於2019-02-16
CSS

簡介

媒體查詢(Media Queries)早在在css2時代就存在,經過css3的洗禮後變得更加強大bootstrap的響應式特性就是從此而來的.

簡單的來講媒體查詢是一種用於修飾css何時起作用的語法.

Media Queries 的引入，其作用就是允許新增表示式用以確定媒體的環境情況，以此來應用不同的樣式表。換句話說，其允許我們在不改變內容的情況下，改變頁面的佈局以精確適應不同的裝置。(1)

既然媒體查詢是用於控制樣式的,而樣式的使用無外乎如下幾種規則:

  • 使用link引入
  • 使用style標籤
  • 使用style屬性
  • 使用@import引入

而顯式的使用媒體查詢宣告樣式我們有如下三種方法:

  • 使用link引入時使用media屬性
  • 使用style標籤時新增media屬性
  • 在樣式中使用條件規則組

我們先來看看link的使用方式:

link標籤使用媒體查詢後基本的樣子如下(1):

<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">

一旦使用了媒體查詢修飾link標籤後,就意味著符合媒體查詢後這個樣式就會被啟用,同樣的規則適用於style標籤.

例子的解釋

那麼對於上面的那一句media="screen and (min-width: 400px)"就可以解釋為:
當螢幕的寬度大於等於400px的時候應用這條樣式規則.

媒體查詢的三個部分

上面的例子中我們可以看到多出了一個media屬性,而media中內容就是媒體查詢的語法,可以被如下解釋:

一個媒體查詢由一個可選的媒體型別和零個或多個使用媒體功能的限制了樣式表範圍的表示式組成，例如寬度、高度和顏色。媒體查詢，新增自CSS3，允許內容的呈現針對一個特定範圍的輸出裝置而進行裁剪，而不必改變內容本身。(2)

看起來很複雜,但是實際上一個媒體查詢的宣告就分為以下三個部分:

  • 媒體型別 – 形容裝置
  • 媒體特性(媒體特徵/媒體功能) – 形容裝置的狀態
  • 邏輯操作符 – 連線多個規則

那麼使用上方的例子來說media="screen and (min-width: 400px)"中screen就是媒體型別,
而後面的and被稱作邏輯操作符,
(min-width: 400px)則被稱作媒體特性.

媒體型別一覽

上文說道媒體查詢在css2中就已經有了,所以有很多媒體型別是在css2時代提出的,其中就只有screen和all被廣泛的使用,有很多都被刪除掉了.

  • 常使用的媒體型別css2制定

    • screen 主要適用於彩色的電腦螢幕
    • all 適用於所有裝置 (媒體型別預設值)

  • 不常使用的媒體型別

    • print
    • speech

  • css2.1被廢棄掉的媒體型別(3)

    • tty
    • tv
    • projection
    • handheld
    • braille
    • embossed
    • aura

常用的媒體特性

名稱 特性
width 可視寬度
height 可視高度

媒體特性完整列表

媒體特性一覽:

https://developer.mozilla.org…

媒體查詢宣告的詳細規則

大家可以執行一下這個例子來感受一下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
        html,body{
            height: 100%;
        }

        body{
            background-color: aqua;
        }
    </style>
    <style media="screen and (min-width: 400px)">
        body{
            background-color: #000;
        }
    </style>
    <title>test</title>
</head>
<body>

</body>
</html>

在這個例子中螢幕寬度大於400畫素的時候body的背景顏色是黑色,但是一旦低於400畫素後就成為了青綠色.

一個媒體查詢宣告中可以由多個媒體查詢組成(使用逗號分割),一個單獨的規則是由如下的格式組成的:

型別 數量 預設值
媒體型別 0 / 1 all
媒體特性 n(n!=0)
邏輯操作符 n-1

也就是說一個媒體查詢中可以存在多條規則,對於一個規則需要一個媒體型別(預設all)和n個媒體特性(可選),他們之間的連線使用邏輯操作符來連線.

當不填寫媒體型別對應的預設規則:

  • (max-width:400px) = all and (max-width:400px)
  • (max-width:400px) and (min-width:200px) = all and (max-width:400px) and (min-width:200px)
  • (max-width:400px) , (min-width:200px) = all and (max-width:400px) , all and (min-width:200px)

媒體特性字首

上面的例子的媒體查詢有如下內容screen and (width: 400px)如果你看過媒體特性一覽表就會發現min-這個內容是沒有提到的.

大部分媒體特性都是有字首的,媒體特性字首主要用於約束媒體特性的作用範圍.

  • max-xxx 小於指定的最大值返回true
  • min-xxx 大於指定的最小值返回true

邏輯操作符

所謂的邏輯操作符說白了就是程式設計中的邏輯操作符,用於連線多個媒體特性表示式.

顯示的邏輯操作符一共有兩個:

  • not 對於匹配到的媒體查詢取反
  • and 只有連線的兩個規則都成立的時候才返回true

注意:預設使用逗號分割的多個媒體查詢就是or的寫法,也就是說逗號就相當於or操作符

特殊的有一個:

  • only 不支援更加高階的媒體型別的瀏覽器檢測到only修飾的時候就會拋棄這個規則

實際使用中然並卵的功能

具體例子及解釋

例子1:

screen and (min-width: 400px)

寬度大於400畫素的裝置使用這個樣式.

例子2:

(min-width: 700px) and (orientation: landscape)

寬度大於700畫素且螢幕為橫屏的時候使用這個樣式.

例子3:

handheld and (max-width:20em), screen and (max-width:30em)

表示此CSS被應用於寬度小於20em的手持，或者寬度小於30em的螢幕.

條件規則組

所謂的條件規則組就是值媒體的宣告不在link標籤和style標籤上,而是在css程式碼中,利用條件規則組我們可以將一塊css程式碼在符合媒體查詢的時候應用.

使用方式(BootStrap中的樣式程式碼)

@media (min-width:768px) {
    .lead {
        font-size: 21px
    }
}

優先順序

在這個例子中:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css" media="screen and (min-width: 400px)">
        html,body{
            height: 100%;
        }

        body{
            background-color: aqua;
        }

        @media screen and (min-width: 400px){
            body{
                background-color: #000;
            }
        }
    </style>
    <title>test</title>
</head>
<body>
    
</body>
</html>

在style標籤上宣告的屬性和在內部的條件規則組媒體查詢設計的一致,但是內部的條件規則組覆蓋掉了外部style上的媒體查詢.

可以看到他們實際上它們之間沒有優先順序,只有先後執行的順序,後執行的規則會覆蓋掉前面的規則.

引用&參考

(1)

http://www.swordair.com/blog/…

(2)

https://developer.mozilla.org…

(3)

https://developer.mozilla.org…

https://developer.mozilla.org…

https://www.zhangxinxu.com/wo…

額外補充

更多的詳細的例子:

http://www.cnblogs.com/lguow/…

使用媒體查詢注意的常見錯誤:

https://blog.csdn.net/qq_3755…

電腦解析度對應的媒體查詢:

https://blog.csdn.net/happyde…

暗坑

在寫例子的時候我使用到了兩個瀏覽器最新的firefox和最新的chrome,有趣的事情是二者在style標籤上使用media屬性表現不同.

firefox中不寫<meta name="viewport" content="width=device-width, initial-scale=1" />也是正常執行,但是chrome就不可以.

相關文章