Media Queries 詳解

来源:http://www.cnblogs.com/Fly-Wind/archive/2016/02/17/5194496.html
-Advertisement-
Play Games

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的語句中包含的內容：
1、screen：這個不用說大家都知道，指的是一種媒體類型；
2、and：被稱為關鍵詞，與其相似的還有not,only，稍後會介紹；
3、（max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件。
前面這個簡單的實例引出兩個概念性的東西，一個就是媒體類型（Media Type）和 媒體特性（Media Query），首先一起來理解一下這兩個概念：
一、媒體類型(Media Type)
媒體類型(Media Type)在css2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的設備指定不同的樣式，在css2中我們常碰到的就是 all（全部）,screen（屏幕）
,print（頁面列印或打邱預覽模式）,其實在媒體類型不止這三種，w3c總共列出了10種媒體類型。
頁面中引入媒體類型方法也有多種：
1、link方法引入
   <link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2、xml方式引入
  <?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3、@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>        
4、@media引入
這種引入方式和@imporr是一樣的，也有兩種方式：
樣式文件中使用：
   @media screen{
     選擇器{
    屬性：屬性值；
     }
   }
在<head>>/head>中的<style>...</style>中調用：
  <head>
    <style type="text/css">
    @media screen{
           選擇器{
         屬性：屬性值；
       }
    }
    </style>
  </head>        
以上幾種方法都有其各自的利弊，在實際應用中我建議使用第一種和第四種，因為這兩種方法是在項目製作中是常用的方法，對於他們的具體區別，我就不說了，想瞭解的大家可以去找度娘或Ｇ爸，
他們能幫你解決。
二、媒體特性（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的屬性集合很相似，主要區別在：
1、Media query只接受單個的邏輯表達式作為其值，或者沒有值；
2、css屬性用於聲明如何表現頁頁的信息；而Media Query是一個用於判斷輸出設備是否滿足某種條件的表達式；
3、Media Query其中的大部分接受min/max首碼，用來表示其邏輯關係，表示應用於大於等於或者小於等於某個值的情況
4、CSS屬性要求必須有屬性值，Media Query可以沒有值，因為其表達式返回的只有真或假兩種
常用的Media Query如下表所示：
 
相容的瀏覽器：
 
下麵我們一起來看看Media Queries的具體使用方式
一、最大寬度Max Width
  <link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
上面表示的是：當屏幕小於或等於600px時，將採用small.css樣式來渲染Web頁面。
二、最小寬度Min Width
   <link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />
上面表示的是：當屏幕大於或等於900px時，將採用big.css樣式來渲染Web頁面。
三、多個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頁面。
四、設備屏幕的輸出寬度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所指的是設備的實際解析度，也就是指可視面積解析度
五、iPhone4
   <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
上面的樣式是專門針對iPhone4的移動設備寫的。
六、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來渲 染頁面。
七、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手機的頁面重構問題。
八、not關鍵字
  <link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not關鍵字是用來排除某種制定的媒體類型，換句話來說就是用於排除符合表達式的設備。
九、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，樣式都不會被採用。
十、其他
在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能在不同的條件下使用不同的樣式，使用頁面達到不同的渲染效果。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 《Cocos2d-x游戲開發實戰精解》學習筆記1--在Cocos2d中顯示圖像
    Cocos2d-x中的圖像是通過精靈類來顯示的。在Cocos2d-x中游戲中的每一個角色、怪物、道具都可以理解成是一個精靈，游戲背景作為一種特殊的單位將其理解成是一個精靈也沒有什麼不妥。
  • windows下nodejs環境配置
    一、下載 去nodejs下載node.msi安裝文件包，裡面包含了node.js和npm； 雙擊node.msi就行了，選擇安裝路徑和npm； 二、設置環境變數 [新版本都不需要設計環境變數了，軟體會自動寫入環境變數] 電腦（或者我的電腦）右擊屬性-》高級系統設置-》環境變數。 新建一個用戶變數。
  • 4種input元素滑塊UI樣式
    分享4種input元素滑塊UI樣式是一款使用CSS3來渲染樣式，使用JavaScript來處理滑塊的滑鼠拖動事件。效果圖如下： 線上預覽 源碼下載 實現的代碼。 js代碼： var range_els = document.querySelectorAll('input[type=range]'),
  • JavaScript類和繼承：constructor屬性
    constructor屬性始終指向創建當前對象的構造函數。比如下麵例子： // 等價於 var foo = new Array(1, 56, 34, 12); var arr = [1, 56, 34, 12]; console.log(arr.constructor === Array); // 
  • 簡單的CSS網頁佈局--一二列佈局
    1.一列佈局 (一)一列自適應 自適應瀏覽器，隨著瀏覽器的拉伸而變化，一般寬度採用百分比的寫法，很簡<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列佈局自適應</title> <style type="t
  • CSS屬性選擇器
    p[name]{background:red;} 只使用屬性名p[name=ghr]{background:red;} 指定屬性名，並指定了該屬性的屬性值p[name~=old]{background:red;}此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞p[name^=
  • [轉]HTML5 本地圖片預覽
    [原文鏈接] https://www.huangwenchao.com.cn/2015/03/html5-image-preview.html 問題 加入我們在 HTML 裡面有一個圖片上傳控制項： <input id="upload_image" type="file" name="image" a
  • 【視覺控】3D時鐘
    心心念念的新年過完了~卻沒念到年會，更沒念到年終獎~哎，以任何理由不發年終獎的公司都是臭流氓~然，我們公司沒有理由，壓根兒就沒提這事，哇卡卡卡卡！！！ ======================== 華麗麗的跳水線=========================== 年後第一天，公司人不多，閑來
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類