CSS 媒體查詢

1术辐,寫在前面的話

前端的生態(tài)很繁榮验毡,技術(shù)更新迭代很快诈乒,很多新的框架和技術(shù)不斷在推陳出新蚊夫,與此同時赡勘,在另一方面呀狼,隨著科技的不斷發(fā)展攒读,用戶獲取信息的方式與媒介也越來越多樣化绸贡,前端產(chǎn)出的內(nèi)容【頁面】就需要去適配多樣化的媒介與終端加袋,給用戶更好的體驗(yàn)猴抹,而在這其中CSS中的媒體查詢模塊就發(fā)揮著重要的作用,讓你的產(chǎn)出“響應(yīng)”用戶的不同場景下的信息獲取锁荔。

2蟀给,規(guī)范定義

我們先來看下規(guī)范的定義

HTML4 [HTML401] and CSS2 [CSS21] currently support media-dependent style sheets tailored for different media types. For example, a document may use different style sheets for screen and print. In HTML4, this can be written as:

HTML4[HTML401] 和CSS2[CSS21] 現(xiàn)在支持針對不同媒體類型定制的設(shè)備獨(dú)立的樣式表。比如阳堕,一個文檔可以為顯示屏幕和打印使用不同的樣式表跋理。在HTML4中,有兩種方式的寫法:

第一種寫法:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">

直接在樣式表鏈接里指定樣式表應(yīng)用的媒體類型恬总。

第二種寫法:

@media screen { * { font-family: sans-serif } }

在樣式表里通過media規(guī)則指定某種媒體類型下的樣式定義前普。

The ‘print’ and ‘screen’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘a(chǎn)ural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘a(chǎn)ural’ and adds ‘embossed’ and ‘speech’. Also, ‘a(chǎn)ll’ is used to indicate that the style sheet applies to all media types.

上面涉及到的兩種媒體類型是在HTML4中定義的,HTML4定義完整的媒體類型有: ‘a(chǎn)ural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’壹堰。CSS2中定義的媒體類型列表和HTML4一樣拭卿,只是廢棄了 ‘a(chǎn)ural’,同時增加了 ‘embossed’ 贱纠、 ‘speech’峻厚。 ‘a(chǎn)ll’也是用來表明樣式定義對所有媒體類型都起作用。

多個用戶代理比如瀏覽器谆焊,都支持"特定于媒體"的樣式表惠桃。 最常媒體類型就是“屏幕”和“打印”。在很多場景下,我們會有更詳細(xì)地描述樣式表應(yīng)用于哪種類型的輸出設(shè)備辜王, 幸運(yùn)的是劈狐,HTML4預(yù)見了這些請求,并為媒體類型定義了向前兼容的語法呐馆,詳細(xì)見HTML4, section 6.13肥缔。

3,應(yīng)用規(guī)則

媒體查詢由媒體類型汹来、零個或多個檢查特定媒體特性應(yīng)用判斷的表達(dá)式組成辫继。除了上訴兩種主要方式去應(yīng)用媒體查詢外,我們核状龋可以在@import規(guī)則里去應(yīng)用媒體查詢

@import url(color.css) screen and (color);

媒體查詢是一個邏輯表達(dá)式,可以為true或false遣耍。 如果媒體查詢的媒體類型與運(yùn)行用戶代理的設(shè)備的媒體類型匹配闺阱,并且媒體查詢中的所有表達(dá)式均為true,則媒體查詢?yōu)閠rue舵变。為適用于所有媒體類型的媒體查詢提供了一種簡寫語法酣溃。 可以省略關(guān)鍵字“all”(后跟“and”)。 即 如果未明確指定媒體類型纪隙,則為“全部”赊豌。例如:

@media all and (min-width:500px) { … }

@media (min-width:500px) { … }

上面這兩種寫法都是可以的,應(yīng)用范圍也是一樣的绵咱。

媒體查詢是可以組合應(yīng)用的碘饼,可以在媒體查詢列表中組合幾個。 媒體查詢列表以逗號進(jìn)行分隔悲伶。 如果以逗號分隔的列表中的一個或多個媒體查詢?yōu)閠rue艾恼,則整個列表為true,否則為false麸锉。 在媒體查詢語法中钠绍,逗號表示邏輯“或”,而關(guān)鍵字“ and”表示邏輯“與”花沉。

@media screen and (color), projection and (color) { … }

如果媒體查詢列表為空(即聲明為空字符串或僅由空格組成)柳爽,則計算結(jié)果為true。等同于如下兩種定義:

@media all { … }

@media { … }

邏輯非可以通過'not'關(guān)鍵字表示碱屁。

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

媒體查詢開頭出現(xiàn)關(guān)鍵字“否”會否定結(jié)果磷脯。 也就是說,如果媒體查詢在沒有'not'關(guān)鍵字的情況下為true娩脾,則它將變?yōu)閒alse争拐,反之亦然。不支持該關(guān)鍵字的用戶代理無法識別“not”關(guān)鍵字,不會應(yīng)用相關(guān)的樣式表架曹。

另一個比較常用的關(guān)鍵字就是“only”隘冲,關(guān)鍵字“only”還可以用于向較舊的用戶代理隱藏樣式表。與關(guān)鍵字“not”不同绑雄,用戶代理必須處理以“only”開頭的媒體查詢展辞,就好像不存在“only”關(guān)鍵字一樣。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末万牺,一起剝皮案震驚了整個濱河市罗珍,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌脚粟,老刑警劉巖覆旱,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異核无,居然都是意外死亡扣唱,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門团南,熙熙樓的掌柜王于貴愁眉苦臉地迎上來噪沙,“玉大人,你說我怎么就攤上這事吐根≌撸” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵拷橘,是天一觀的道長局义。 經(jīng)常有香客問我,道長冗疮,這世上最難降的妖魔是什么旭咽? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮赌厅,結(jié)果婚禮上穷绵,老公的妹妹穿的比我還像新娘。我一直安慰自己特愿,他們只是感情好仲墨,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著揍障,像睡著了一般目养。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上毒嫡,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天癌蚁,我揣著相機(jī)與錄音,去河邊找鬼。 笑死努释,一個胖子當(dāng)著我的面吹牛碘梢,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播伐蒂,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼煞躬,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了逸邦?” 一聲冷哼從身側(cè)響起恩沛,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎缕减,沒想到半個月后雷客,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡桥狡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年搅裙,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片总放。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖好爬,靈堂內(nèi)的尸體忽然破棺而出局雄,到底是詐尸還是另有隱情,我是刑警寧澤存炮,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布炬搭,位于F島的核電站,受9級特大地震影響穆桂,放射性物質(zhì)發(fā)生泄漏宫盔。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一享完、第九天 我趴在偏房一處隱蔽的房頂上張望灼芭。 院中可真熱鬧,春花似錦般又、人聲如沸彼绷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽寄悯。三九已至,卻和暖如春堕义,著一層夾襖步出監(jiān)牢的瞬間猜旬,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留洒擦,地道東北人椿争。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像秘遏,于是被迫代替她去往敵國和親丘薛。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 隨著科學(xué)技術(shù)不斷的向前發(fā)展邦危,網(wǎng)頁的瀏覽終端越來越多樣化洋侨,用戶可以通過:寬屏電視、臺式電腦倦蚪、筆記本電腦希坚、平板電腦和智...
    ABCDE的E閱讀 482評論 0 0
  • media為不同設(shè)備指定不同樣式 common.css存放公共樣式,screen.css和print.css分別指...
    alfalfaw閱讀 242評論 0 0
  • 媒體查詢(Media Queries)陵且,可以根據(jù)不同的媒體情況加載相應(yīng)的樣式裁僧。有兩種使用方式: (1)樣式表文件例...
    何幻閱讀 210評論 0 0
  • 一切都是彈性 兼容瀏覽器(課余時間去探索) 響應(yīng)式網(wǎng)站的概念: flexible grid layout 彈性網(wǎng)格...
    德_f8a4閱讀 575評論 0 0
  • 1. 以滿分十分來評估自己——你有多擅長 Java沪悲? 如果你并不完全確信你自己或是你對 Java 的熟練程度获洲,那么...
    墨雨軒夏閱讀 1,239評論 0 31