詳解css媒體查詢

時間 2019-12-04

標籤詳解 css 媒體查詢欄目 CSS 简体版

原文原文鏈接

簡介

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

簡單的來說媒體查詢是一種用於修飾css什麼時候起做用的語法.html

Media Queries 的引入，其做用就是容許添加表達式用以肯定媒體的環境狀況，以此來應用不一樣的樣式表。換句話說，其容許咱們在不改變內容的狀況下，改變頁面的佈局以精確適應不一樣的設備。(1)

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

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

而顯式的使用媒體查詢聲明樣式咱們有以下三種方法:chrome

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

咱們先來看看link的使用方式:編程

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

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

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

例子的解釋

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

媒體查詢的三個部分

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

一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表範圍的表達式組成，例如寬度、高度和顏色。媒體查詢，添加自CSS3，容許內容的呈現針對一個特定範圍的輸出設備而進行裁剪，而沒必要改變內容自己。(2)

看起來很複雜,可是實際上一個媒體查詢的聲明就分爲如下三個部分:wordpress

媒體類型 - 形容設備
媒體特性(媒體特徵/媒體功能) - 形容設備的狀態
邏輯操做符 - 鏈接多個規則

那麼使用上方的例子來講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上的媒體查詢.

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