Media Queries詳解

時間 2019-12-09

標籤 media queries 詳解简体版

原文原文鏈接

Media Queries直譯過來就是「媒體查詢」，在咱們平時的Web頁面中head部分常看到這樣的一段代碼：
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
或者這樣的形式：
<style type="text/css" media="screen">
    @import url("css/style.css");
</style>
不知道你們留意沒有，其中兩種方式引入CSS樣式都有一個共同的屬性「media」，而這個「media」就是用來指定特定的媒體類型，在HTML4和CSS2中充許你使用「media」來指定特定的媒體類型，
如屏幕（screen）和打印（print）的樣式表，固然還有其餘的，好比說「TV」,「handheld」等，其中「all」表示的是支持全部媒體介質。有關於更多的Media類型，能夠點擊這裏。
上面簡單說了一下HTML4和CSS2的「Media Queries」,而今天的主要是來學習CSS3中的"Media Queries"的更多使用方法和相關知識，下面咱們開始進入今天的主題。
CSS3中的Media Queries增長了更多的媒體查詢，同時你能夠添加不一樣的媒體類型的表達式用來檢查媒體是否符合某些條件，若是媒體符合相應的條件，那麼就會調用對應的樣式表。
換句簡單的說，「在CSS3中咱們能夠設置不一樣類型的媒體條件，並根據對應的條件，給相應符合條件的媒體調用相對應的樣式表」。
如今最多見的一個例子，你能夠同時給PC機的大屏幕和移動設備設置不一樣的樣式表。這功能是很是強大的，他可讓你定製不一樣的分辨率和設備，並在不改變內容的狀況下，
讓你制做的web頁面在不一樣的分辨率和設備下都能顯示正常，而且不會所以而丟失樣式。
首先來看一個簡單的實例：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
上面的media語句表示的是：當頁頁寬度小於或等於600px,調用small.css樣式表來渲染你的Web頁面。首先來看media的語句中包含的內容：
一、screen：這個不用說你們都知道，指的是一種媒體類型；
二、and：被稱爲關鍵詞，與其類似的還有not,only，稍後會介紹；
三、（max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件。
前面這個簡單的實例引出兩個概念性的東西，一個就是媒體類型（Media Type）和媒體特性（Media Query），首先一塊兒來理解一下這兩個概念：
1、媒體類型(Media Type)
媒體類型(Media Type)在css2中是一個常見的屬性，也是一個很是有用的屬性，能夠經過媒體類型對不一樣的設備指定不一樣的樣式，在css2中咱們常碰到的就是 all（所有）,screen（屏幕）
,print（頁面打印或打邱預覽模式）,其實在媒體類型不止這三種，w3c總共列出了10種媒體類型。
頁面中引入媒體類型方法也有多種：
一、link方法引入
   <link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
二、xml方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
三、@import方式引入
@import引入有兩種方式，一種是在樣式文件中經過@import調用別一個樣式文件；另外一種方法是在<head>>/head>中的<style>...</style>中引入，單這種使用方法在 ie6-7都不被支持如
樣式文件中調用另外一個樣式文件：
   @import url("css/reset.css") screen;
   @import url("css/print.css") print;
在<head>>/head>中的<style>...</style>中調用：
<head>
    <style type="text/css">
   @import url("css/style.css") all;
    </style>
</head>
四、@media引入
這種引入方式和@imporr是同樣的，也有兩種方式：
樣式文件中使用：
   @media screen{
     選擇器{
   屬性：屬性值；
     }
   }
在<head>>/head>中的<style>...</style>中調用：
<head>
    <style type="text/css">
   @media screen{
           選擇器{
         屬性：屬性值；
       }
   }
    </style>
</head>
以上幾種方法都有其各自的利弊，在實際應用中我建議使用第一種和第四種，由於這兩種方法是在項目製做中是經常使用的方法，對於他們的具體區別，我就不說了，想了解的你們能夠去找度娘或Ｇ爸，
他們能幫你解決。
2、媒體特性（Media Query）
前面有簡單的提到，Media Query是CSS3 對Media Type的加強版，其實能夠將Media Query當作Media Type(判斷條件)+CSS(符合條件的樣式規則)，經常使用的特性w3c共列出來13種。
具體的能夠參閱：Media features。爲了更能理解Media Query，咱們在次回到前面的實例上：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
轉換成css中的寫法爲：
@media screen and (max-width: 600px) {
    選擇器 {
      屬性：屬性值；
    }
}
其實就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){...}的大括號之中。在語句上面的語句結構中，能夠看出Media query和css的屬性集合很類似，主要區別在：
一、Media query只接受單個的邏輯表達式做爲其值，或者沒有值；
二、css屬性用於聲明如何表現頁頁的信息；而Media Query是一個用於判斷輸出設備是否知足某種條件的表達式；
三、Media Query其中的大部分接受min/max前綴，用來表示其邏輯關係，表示應用於大於等於或者小於等於某個值的狀況
四、CSS屬性要求必須有屬性值，Media Query能夠沒有值，由於其表達式返回的只有真或假兩種
經常使用的Media Query以下表所示：

兼容的瀏覽器：

下面咱們一塊兒來看看Media Queries的具體使用方式
1、最大寬度Max Width
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
上面表示的是：當屏幕小於或等於600px時，將採用small.css樣式來渲染Web頁面。
2、最小寬度Min Width
   <link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
上面表示的是：當屏幕大於或等於900px時，將採用big.css樣式來渲染Web頁面。
3、多個Media Queries使用
   <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
Media Query能夠結合多個媒體查詢，換句話說，一個Media Query能夠包含0到多個表達式，表達式又能夠包含0到多個關鍵字，以及一種Media Type。
正如上面的其表示的是當屏幕在600px-900px之間時採用style.css樣式來渲染web頁面。
4、設備屏幕的輸出寬度Device Width
   <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
上面的代碼指的是iphone.css樣式適用於最大設備寬度爲480px，好比說iPhone上的顯示，這裏的max-device-width所指的是設備的實際分辨率，也就是指可視面積分辨率
5、iPhone4
   <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
上面的樣式是專門針對iPhone4的移動設備寫的。
6、iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />
在大數狀況下，移動設備iPad上的Safari和在iPhone上的是相同的，只是他們不一樣之處是iPad聲明瞭不一樣的方向，好比說上面的例子，在縱向(portrait)時採用portrait.css來渲染頁面；
在橫向（landscape）時採用landscape.css來渲染頁面。
7、android
/*240px的寬度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
咱們可使用media query爲android手機在不一樣分辨率提供特定樣式，這樣就能夠解決屏幕分辨率的不一樣給android手機的頁面重構問題。
8、not關鍵字
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not關鍵字是用來排除某種制定的媒體類型，換句話來講就是用於排除符合表達式的設備。
9、only關鍵字
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
only用來定某種特定的媒體類型，能夠用來排除不支持媒體查詢的瀏覽器。其實only不少時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。
其主要有：支持媒體特性（Media Queries）的設備，正常調用樣式，此時就當only不存在；對於不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設備，這樣就會不讀了樣式，
由於其先讀only而不是screen；另外不支持Media Qqueries的瀏覽器，不管是否支持only，樣式都不會被採用。
10、其餘
在Media Query中若是沒有明確指定Media Type，那麼其默認爲all，如：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
另外還有使用逗號（，）被用來表示並列或者表示或，以下
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小於或等於480px的手持設備上，或者被用於屏幕寬度大於或等於960px的設備上。
關於Media Query的使用這一節就介紹到此，最後整體規納一下其功能，我的認爲就是一句話：Media Queries能在不一樣的條件下使用不一樣的樣式，使用頁面達到不一樣的渲染效果。css

1. Media Queries 詳解
2. Media Queries詳解--轉
3. 媒體查詢Media Queries詳解
4. CSS3-----Media Queries
5. CSS media queries
6. CSS3 Media Queries
7. CSS3 Media Queries 片斷
8. 實踐 HTML5 的 CSS3 Media Queries
9. Media Queries語法總結
10. iPhone6&iPhone6 Plus CSS3 Media Queries
更多相關文章...
• 免費ARP詳解 - TCP/IP教程
• *.hbm.xml映射文件詳解 - Hibernate教程
• Flink 數據傳輸及反壓詳解
• 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。