CSS @media

舉例:@media only screen and

only: 限定某種設(shè)備;

screen: 是媒體類型中的一種,其他還有print/handheld/tv/tty等;

and: 關(guān)鍵字,其他關(guān)鍵字還包括not(排除某種設(shè)備);

1. 常用場景:

a.?

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width:600px) and (max-width:800px)">

---表示style.css只應(yīng)用于屏幕的寬度是在大于600px小于800px的情況下;

b.

@media screen and (max-width:600px){

.class{

? background: #ccc;

}

}

---表示屏幕寬度小于600px時(shí),#ccc背景顏色生效;

2. device-aspect-ratio

當(dāng)需求是要對(duì)某種長寬比的屏幕做特殊樣式的情況下使用

@media only screen and (device-aspect-ratio:4/3)

3. only ?: 一般來說,用only是看不出效果的,這樣采用效果:


@media all and (min-width:xxx) and (max-width:xxx){

? ? ? /*這段查詢的all是針對(duì)所有設(shè)備(有些設(shè)備不一定是屏幕,也許是打字機(jī),盲人閱讀器)*/

}

@media only screen and (min-width:xxx) and (max-width:xxx){

? ? ? ? ?/*上面針對(duì)了所有設(shè)備,這段是只(only)針對(duì)彩色屏幕設(shè)備*/

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,788評(píng)論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,327評(píng)論 0 11
  • 媒體查詢:css media 概述 通過媒體查詢?yōu)椴煌脑O(shè)備和大小配置不同的樣式。 代碼展示: 使用方法 通過右鍵...
    小豌豆書吧閱讀 535評(píng)論 0 1
  • 孤獨(dú)不僅僅是一個(gè)人待著,孤獨(dú)是強(qiáng)者的一種勇氣;孤獨(dú)是熱愛生命的一種激情;孤獨(dú)是靈魂背對(duì)著凡俗的諸種誘惑與上蒼、與萬...
    宇宙第二帥的恒寶寶閱讀 244評(píng)論 0 0
  • 來來來,有獎(jiǎng)競猜,在幼兒園,老師給我貼了一個(gè)標(biāo)簽,猜猜是什么? 在幼兒園時(shí)光,老師給我貼了一個(gè)標(biāo)...
    星星011閱讀 466評(píng)論 0 3