CSS3 多媒體查詢

CSS2 多媒體類型

@media 規則在 CSS2 中有介紹，針對不同媒體類型可以定制不同的樣式規則。

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

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

CSS3 多媒體查詢

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

媒體查詢可用于檢測很多事情，例如：

viewport(視窗) 的寬度與高度

設備的寬度與高度

朝向 (智能手機橫屏，豎屏) 。

分辨率

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

瀏覽器支持

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

屬性

@media

21.0

9.0

3.5

4.0

9.0

多媒體查詢語法

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

@medianot|onlymediatypeand(expressions){CSS代碼...;}

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

除非你使用了 not 或 only 操作符，否則所有的樣式會適應在所有設備上顯示效果。

not: not是用來排除掉某些特定的設備的，比如 @media not print(非打印設備)。

only: 用來定某種特別的媒體類型。對于支持Media Queries的移動設備來說，如果存在only關鍵字，移動設備的Web瀏覽器會忽略only關鍵字并直接根據后面的表達式應用樣式文件。對于不支持Media Queries的設備但能夠讀取Media Type類型的Web瀏覽器，遇到only關鍵字時會忽略這個樣式文件。

all: 所有設備，這個應該經常看到。

你也可以在不同的媒體上使用不同的樣式文件：

CSS3 多媒體類型

值

描述

all

用于所有多媒體類型設備

print

用于打印機

screen

用于電腦屏幕，平板，智能手機等。

speech

用于屏幕閱讀器

多媒體查詢簡單實例

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

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

實例

@mediascreenand(max-width: 480px){body{background-color:lightgreen;}}

嘗試一下 ?

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

實例

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

嘗試一下 ?

以下實例在屏幕可視窗口尺寸小于 600 像素時將 div 元素隱藏：

實例

@mediascreenand(max-width: 600px){div.example{display:none;}}

嘗試一下 ?

CSS3 @media 參考

更多多媒體查詢內容可以參考

@media 規則。

總結

以上是生活随笔為你收集整理的HTML引入媒体查询CSS,CSS3 多媒体查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。