CSS3 多媒體查詢

時間  2019-11-12
標籤 css3 css 多媒體 查詢 欄目 CSS 简体版
原文   原文鏈接

CSS2 多媒體類型

@media 規則在 CSS2 中有介紹，針對不一樣媒體類型能夠定製不一樣的樣式規則。css

例如：你能夠針對不一樣的媒體類型(包括顯示器、便攜設備、電視機，等等)設置不一樣的樣式規則。html

可是這些多媒體類型在不少設備上支持還不夠友好。html5

CSS3 多媒體查詢

CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的全部思想： 取代了查找設備的類型，CSS3 根據設置自適應顯示。android

媒體查詢可用於檢測不少事情，例如：web

  • viewport(視窗) 的寬度與高度
  • 設備的寬度與高度
  • 朝向 (智能手機橫屏，豎屏) 。
  • 分辨率

目前不少針對蘋果手機，Android 手機，平板等設備都會使用到多媒體查詢。chrome

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器的版本號。express

屬性 http://www.runoob.com/images/compatible_chrome.gif http://www.runoob.com/images/compatible_edge.gif http://www.runoob.com/images/compatible_firefox.gif http://www.runoob.com/images/compatible_safari.gif http://www.runoob.com/images/compatible_opera.gif
@media 21.0 9.0 3.5 4.0 9.0

多媒體查詢語法

多媒體查詢由多種媒體組成，能夠包含一個或多個表達式，表達式根據條件是否成立返回 true 或 false。瀏覽器

@media not|only mediatype and (expressions) { CSS 代碼...; }cookie

若是指定的多媒體類型匹配設備類型則查詢結果返回 true，文檔會在匹配的設備上顯示指定樣式效果。網絡

除非你使用了 not 或 only 操做符，不然全部的樣式會適應在全部設備上顯示效果。

  • not: not是用來排除掉某些特定的設備的，好比 @media not print（非打印設備）。

  • only: 用來定某種特別的媒體類型。對於支持Media Queries的移動設備來講，若是存在only關鍵字，移動設備的Web瀏覽器會忽略only關鍵字並直接根據後面的表達式應用樣式文件。對於不支持Media Queries的設備但可以讀取Media Type類型的Web瀏覽器，遇到only關鍵字時會忽略這個樣式文件。

  • all: 全部設備，這個應該常常看到。

你也能夠在不一樣的媒體上使用不一樣的樣式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

媒體類型

值 描述
all 用於全部設備
aural 已廢棄。用於語音和聲音合成器
braille 已廢棄。 應用於盲文觸摸式反饋設備
embossed 已廢棄。 用於打印的盲人印刷設備
handheld 已廢棄。 用於掌上設備或更小的裝置，如PDA和小型電話
print 用於打印機和打印預覽
projection 已廢棄。 用於投影設備
screen 用於電腦屏幕，平板電腦，智能手機等。
speech 應用於屏幕閱讀器等發聲設備
tty 已廢棄。 用於固定的字符網格，如電報、終端設備和對字符有限制的便攜設備
tv 已廢棄。 用於電視和網絡電視

媒體功能

值 描述
aspect-ratio 定義輸出設備中的頁面可見區域寬度與高度的比率
color 定義輸出設備每一組彩色原件的個數。若是不是彩色設備，則值等於0
color-index 定義在輸出設備的彩色查詢表中的條目數。若是沒有使用彩色查詢表，則值等於0
device-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的比率。
device-height 定義輸出設備的屏幕可見高度。
device-width 定義輸出設備的屏幕可見寬度。
grid 用來查詢輸出設備是否使用柵格或點陣。
height 定義輸出設備中的頁面可見區域高度。
max-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的最大比率。
max-color 定義輸出設備每一組彩色原件的最大個數。
max-color-index 定義在輸出設備的彩色查詢表中的最大條目數。
max-device-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的最大比率。
max-device-height 定義輸出設備的屏幕可見的最大高度。
max-device-width 定義輸出設備的屏幕最大可見寬度。
max-height 定義輸出設備中的頁面最大可見區域高度。
max-monochrome 定義在一個單色框架緩衝區中每像素包含的最大單色原件個數。
max-resolution 定義設備的最大分辨率。
max-width 定義輸出設備中的頁面最大可見區域寬度。
min-aspect-ratio 定義輸出設備中的頁面可見區域寬度與高度的最小比率。
min-color 定義輸出設備每一組彩色原件的最小個數。
min-color-index 定義在輸出設備的彩色查詢表中的最小條目數。
min-device-aspect-ratio 定義輸出設備的屏幕可見寬度與高度的最小比率。
min-device-width 定義輸出設備的屏幕最小可見寬度。
min-device-height 定義輸出設備的屏幕的最小可見高度。
min-height 定義輸出設備中的頁面最小可見區域高度。
min-monochrome 定義在一個單色框架緩衝區中每像素包含的最小單色原件個數
min-resolution 定義設備的最小分辨率。
min-width 定義輸出設備中的頁面最小可見區域寬度。
monochrome 定義在一個單色框架緩衝區中每像素包含的單色原件個數。若是不是單色設備，則值等於0
orientation 定義輸出設備中的頁面可見區域高度是否大於或等於寬度。
resolution 定義設備的分辨率。如：96dpi, 300dpi, 118dpcm
scan 定義電視類設備的掃描工序。
width 定義輸出設備中的頁面可見區域寬度。

多媒體查詢簡單實例

使用多媒體查詢能夠在指定的設備上使用對應的樣式替代原有的樣式。

如下實例中在屏幕可視窗口尺寸大於 480 像素的設備上修改背景顏色:

實例

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

如下實例在屏幕可視窗口尺寸大於 480 像素時將菜單浮動到頁面左側：

實例

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

一個完整的例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>菜鳥教程(runoob.com)</title> 
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>

<h1>重置瀏覽器窗口，查看效果!</h1>

<ul>
  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>

</body>
</html>

從上面咱們能夠看出有幾個臨界點的分辨率，那麼咱們就能夠輕鬆的來寫本身的自適應代碼了

@media (min-width: 768px){ //>=768的設備 }

@media (min-width: 992px){ //>=992的設備 }

@media (min-width: 1200){ //>=1200的設備 }

注意下順序，若是你把@media (min-width: 768px)寫在了下面那麼很悲劇，

@media (min-width: 1200){ //>=1200的設備 }

@media (min-width: 992px){ //>=992的設備 }

@media (min-width: 768px){ //>=768的設備 }

由於若是是1440,因爲1440>768那麼你的1200就會失效。

因此咱們用min-width時，小的放上面大的在下面，同理若是是用max-width那麼就是大的在上面，小的在下面

@media (max-width: 1199){ //<=1199的設備 }

@media (max-width: 991px){ //<=991的設備 }

@media (max-width: 767px){ //<=768的設備 }

HTML5 <meta>

定義和用法

<meta> 元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。

<meta> 標籤位於文檔的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文檔相關聯的名稱/值對。

HTML 4.01 與 HTML 5 之間的差別

在 HTML 5 中，再也不支持 scheme 屬性。

在 HTML 5 中，有一個新的 charset 屬性，它使字符集的定義更加容易。

在 HTML 4.01 中，不得不這麼寫：

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

在 HTML 5 中，這樣就夠了：

<meta charset="ISO-8859-1">

提示和註釋

提示：請使用 CSS 來定義列表的類型。

例子

定義針對搜索引擎的關鍵詞：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

定義對頁面的描述：

<meta name="description" content="免費的 web 技術教程。" />

定義頁面的最新版本：

<meta name="revised" content="David, 2008/8/8/" />

每 5 秒刷新一次頁面：

<meta http-equiv="refresh" content="5" />

屬性

屬性 值 描述 4 5
charset character encoding 定義文檔的字符編碼。   5
content some_text 定義與 http-equiv 或 name 屬性相關的元信息。 4 5
http-equiv
  • content-type
  • expires
  • refresh
  • set-cookie
 把 content 屬性關聯到 HTTP 頭部。 4 5
name
  • author
  • description
  • keywords
  • generator
  • revised
  • others
 把 content 屬性關聯到一個名稱。 4 5
scheme some_text 定義用於翻譯 content 屬性值的格式。不支持。 4  

標準屬性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, 
lang, ref, registrationmark, tabindex, template, title

如需完整的描述，請訪問 HTML 5 中標準屬性。

事件屬性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, 
ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, 
ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, 
onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, 
onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

如需完整的描述，請訪問 HTML 5 中事件屬性。

-------------------------------------------------------------------------------------------------------------------------------------------------------

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 容許用戶縮放到的最小比例
maximum-scale - 容許用戶縮放到的最大比例
user-scalable - 用戶是否能夠手動縮放

viewport 語法介紹：

01 <!-- html document -->
02 <meta name="viewport"
03     content="
04         height = [pixel_value | device-height] ,
05         width = [pixel_value | device-width ] ,
06         initial-scale = float_value ,
07         minimum-scale = float_value ,
08         maximum-scale = float_value ,
09         user-scalable = [yes | no] ,
10         target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
11     "
12 />

width

控制 viewport 的大小，能夠指定的一個值或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。

height

和 width 相對應，指定高度。

target-densitydpi

一個屏幕像素密度是由屏幕分辨率決定的，一般定義爲每英寸點的數量（dpi）。Android支持三種屏幕像素密度：低像素密度，中像素密度，高像素密度。一個低像素密度的屏幕每英寸上的像素點更少，而一個高像素密度的屏幕每英寸上的像素點更多。Android Browser和WebView默認屏幕爲中像素密度。

下面是 target-densitydpi 屬性的 取值範圍

  • device-dpi –使用設備本來的 dpi 做爲目標 dp。 不會發生默認縮放。
  • high-dpi – 使用hdpi 做爲目標 dpi。 中等像素密度和低像素密度設備相應縮小。
  • medium-dpi – 使用mdpi做爲目標 dpi。 高像素密度設備相應放大， 像素密度設備相應縮小。 這是默認的target density.
  • low-dpi -使用mdpi做爲目標 dpi。中等像素密度和高像素密度設備相應放大。
  • <value> – 指定一個具體的dpi 值做爲target dpi. 這個值的範圍必須在70–400之間。
1 <!-- html document -->
2 <meta name="viewport" content="target-densitydpi=device-dpi" />
3 <meta name="viewport" content="target-densitydpi=high-dpi" />
4 <meta name="viewport" content="target-densitydpi=medium-dpi" />
5 <meta name="viewport" content="target-densitydpi=low-dpi" />
6 <meta name="viewport" content="target-densitydpi=200" />

爲了防止Android Browser和WebView 根據不一樣屏幕的像素密度對你的頁面進行縮放，你能夠將viewport的target-densitydpi 設置爲 device-dpi。當你這麼作了，頁面將不會縮放。相反，頁面會根據當前屏幕的像素密度進行展現。在這種情形下，你還須要將viewport的width定義爲與設備的width匹配，這樣你的頁面就能夠和屏幕相適應。

initial-scale

初始縮放。即頁面初始縮放程度。這是一個浮點值，是頁面大小的一個乘數。例如，若是你設置初始縮放爲「1.0」，那麼，web頁面在展示的時候就會以target density分辨率的1:1來展示。若是你設置爲「2.0」，那麼這個頁面就會放大爲2倍。

maximum-scale

最大縮放。即容許的最大縮放程度。這也是一個浮點值，用以指出頁面大小與屏幕大小相比的最大乘數。例如，若是你將這個值設置爲「2.0」，那麼這個頁面與target size相比，最多能放大2倍。

user-scalable

用戶調整縮放。即用戶是否能改變頁面縮放程度。若是設置爲yes則是容許用戶對其進行改變，反之爲no。默認值是yes。若是你將其設置爲no，那麼minimum-scale 和 maximum-scale都將被忽略，由於根本不可能縮放。

全部的縮放值都必須在0.01–10的範圍以內。

例：

(設置屏幕寬度爲設備寬度，禁止用戶手動調整縮放)

 <meta name="viewport" content="width=device-width,user-scalable=no" />

(設置屏幕密度爲高頻，中頻，低頻自動縮放，禁止用戶手動調整縮放)

<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程