極速下載站 —— 提供優(yōu)質(zhì)軟件下載服務(wù),感受全新的極速下載體驗(yàn)!

最近更新 | 軟件專題 | 軟件分類 | 軟件排行

您的位置:極速下載站資訊首頁軟件教程軟件資訊 → CSS3教程:CSS3 多媒體查詢

CSS3教程:CSS3 多媒體查詢

時(shí)間:2019-08-21 19:31:55  作者:johnnyl  瀏覽量:41

社會(huì)的發(fā)展,科技的進(jìn)步,人們生活水平提高,工作和生活中越來越離不開電腦,電腦是由軟件、系統(tǒng)、程序等組成,如果想要更好的去使用電腦,那么我們應(yīng)該去學(xué)習(xí)這些知識(shí),今天小編就帶領(lǐng)大家學(xué)習(xí)CSS 的相關(guān)教程。

CSS2 多媒體類型

@media 規(guī)則在 CSS2 中有介紹,針對(duì)不同媒體類型可以定制不同的樣式規(guī)則。

例如:你可以針對(duì)不同的媒體類型(包括顯示器、便攜設(shè)備、電視機(jī),等等)設(shè)置不同的樣式規(guī)則。

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

CSS3 多媒體查詢

CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有思想: 取代了查找設(shè)備的類型,CSS3 根據(jù)設(shè)置自適應(yīng)顯示。

媒體查詢可用于檢測(cè)很多事情,例如:

viewport(視窗) 的寬度與高度

設(shè)備的寬度與高度

朝向 (智能手機(jī)橫屏,豎屏) 。

分辨率

目前很多針對(duì)蘋果手機(jī),Android 手機(jī),平板等設(shè)備都會(huì)使用到多媒體查詢。

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)。

圖:CSS3教程:

CSS3教程:CSS3 多媒體查詢圖1

多媒體查詢語法

多媒體查詢由多種媒體組成,可以包含一個(gè)或多個(gè)表達(dá)式,表達(dá)式根據(jù)條件是否成立返回 true 或 false。

圖:CSS3教程:

CSS3教程:CSS3 多媒體查詢圖2

如果指定的多媒體類型匹配設(shè)備類型則查詢結(jié)果返回 true,文檔會(huì)在匹配的設(shè)備上顯示指定樣式效果。

除非你使用了 not 或 only 操作符,否則所有的樣式會(huì)適應(yīng)在所有設(shè)備上顯示效果。

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

only: 用來定某種特別的媒體類型。對(duì)于支持Media Queries的移動(dòng)設(shè)備來說,如果存在only關(guān)鍵字,移動(dòng)設(shè)備的Web瀏覽器會(huì)忽略only關(guān)鍵字并直接根據(jù)后面的表達(dá)式應(yīng)用樣式文件。對(duì)于不支持Media Queries的設(shè)備但能夠讀取Media Type類型的Web瀏覽器,遇到only關(guān)鍵字時(shí)會(huì)忽略這個(gè)樣式文件。

all: 所有設(shè)備,這個(gè)應(yīng)該經(jīng)常看到。

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

圖:CSS3教程:

CSS3教程:CSS3 多媒體查詢圖3

CSS3 多媒體類型

圖:CSS3教程:

CSS3教程:CSS3 多媒體查詢圖4

多媒體查詢簡(jiǎn)單實(shí)例

使用多媒體查詢可以在指定的設(shè)備上使用對(duì)應(yīng)的樣式替代原有的樣式。

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

圖:CSS3教程:

CSS3教程:CSS3 多媒體查詢圖5

以下實(shí)例在屏幕可視窗口尺寸大于 480 像素時(shí)將菜單浮動(dòng)到頁面左側(cè):

圖:CSS3教程:

CSS3教程:CSS3 多媒體查詢圖6

相關(guān)資訊

相關(guān)軟件