CSS3媒體查詢(Media Queries)介紹
發(fā)布時(shí)間:2013-09-12 15:28:50 作者:佚名
我要評(píng)論

媒體類型:all 所有設(shè)備、screen 電腦顯示器等等;媒體特性共13種,可以說是一個(gè)類似CSS屬性的集合,感興趣的朋友可以了解下本文,希望對(duì)大家有所幫助
媒體類型
all 所有設(shè)備
screen 電腦顯示器
handheld 便攜設(shè)備
tv 電視類型設(shè)備
print 打印用紙打印預(yù)覽視圖
關(guān)鍵字
and
not(排除某種設(shè)備)
only(限定某種設(shè)備)
媒體特性
媒體特性共13種,可以說是一個(gè)類似CSS屬性的集合。其中的大部分接受 min/max 的前綴,用來表示 大于等于/小于等于 的邏輯。
and
示例如下所示:
@media screen and (min-width: 800px) {樣式代碼} >800
@media screen and (min-width: 600px) and (max-width: 800px) {樣式代碼} 600
@media screen and (max-width: 600px) {樣式代碼} <600
外部樣式表引用方式:
上面將設(shè)備分成3種,分別是寬度大于800px時(shí),應(yīng)用styleA,寬度在600px到800px之間時(shí)應(yīng)用styleB,以及寬度小于600px時(shí)應(yīng)用styleC。
not 和all
@media not handheld and (color){樣式代碼} //用于除便攜之外的其他設(shè)備或非彩色便攜設(shè)備中
@media all and (not color){樣式代碼} //用于所有非彩色設(shè)備中
only
only 關(guān)鍵字可能顯得有些多余,對(duì)支持Media Queries的瀏覽器來說確實(shí)是這樣,但很多時(shí)候only是用來對(duì)那些不支持Media Queries但是卻讀取Media Type的設(shè)備隱藏樣式表的
@media only screen add (color){樣式代碼}
支持Media Queries的設(shè)備,正確應(yīng)用樣式,就仿佛only不存在
不支持Media Queries但正確讀取Media Type的設(shè)備,由于先讀取到only而不是screen,將忽略這個(gè)樣式
不支持Media Queries的IE不論是否有only,都忽略樣式
all 所有設(shè)備
screen 電腦顯示器
handheld 便攜設(shè)備
tv 電視類型設(shè)備
print 打印用紙打印預(yù)覽視圖
關(guān)鍵字
and
not(排除某種設(shè)備)
only(限定某種設(shè)備)
媒體特性
媒體特性共13種,可以說是一個(gè)類似CSS屬性的集合。其中的大部分接受 min/max 的前綴,用來表示 大于等于/小于等于 的邏輯。

and
示例如下所示:
@media screen and (min-width: 800px) {樣式代碼} >800
@media screen and (min-width: 600px) and (max-width: 800px) {樣式代碼} 600
@media screen and (max-width: 600px) {樣式代碼} <600
外部樣式表引用方式:
上面將設(shè)備分成3種,分別是寬度大于800px時(shí),應(yīng)用styleA,寬度在600px到800px之間時(shí)應(yīng)用styleB,以及寬度小于600px時(shí)應(yīng)用styleC。
not 和all
@media not handheld and (color){樣式代碼} //用于除便攜之外的其他設(shè)備或非彩色便攜設(shè)備中
@media all and (not color){樣式代碼} //用于所有非彩色設(shè)備中
only
only 關(guān)鍵字可能顯得有些多余,對(duì)支持Media Queries的瀏覽器來說確實(shí)是這樣,但很多時(shí)候only是用來對(duì)那些不支持Media Queries但是卻讀取Media Type的設(shè)備隱藏樣式表的
@media only screen add (color){樣式代碼}
支持Media Queries的設(shè)備,正確應(yīng)用樣式,就仿佛only不存在
不支持Media Queries但正確讀取Media Type的設(shè)備,由于先讀取到only而不是screen,將忽略這個(gè)樣式
不支持Media Queries的IE不論是否有only,都忽略樣式
相關(guān)文章
詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實(shí)戰(zhàn)(推薦)
這篇文章主要介紹了詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實(shí)戰(zhàn)(推薦),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的2020-11-16css3媒體查詢中device-width和width的區(qū)別詳解
這篇文章主要介紹了css3媒體查詢中device-width和width的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小2020-03-27- 這篇文章主要介紹了css3 響應(yīng)式媒體查詢的示例代碼,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-25
CSS3中媒體查詢結(jié)合rem布局適配手機(jī)屏幕
這篇文章主要介紹了css3中媒體查詢結(jié)合rem布局適配手機(jī)屏幕,需要的朋友可以參考下2019-06-10- 這篇文章主要介紹了CSS3 Media Queries中媒體屬性的使用,文章中還以一個(gè)響應(yīng)式設(shè)計(jì)的例子作為補(bǔ)充講解,需要的朋友可以參考下2016-02-29
CSS3媒體查詢Media Queries基礎(chǔ)學(xué)習(xí)教程
這篇文章主要介紹了CSS3媒體查詢基本學(xué)習(xí)教程,包括基本的語法和邏輯操作符,以及媒體查詢可檢測(cè)的特性與利用viewport禁止用戶縮放等部分的內(nèi)容,需要的朋友可以參考下2016-02-29使用CSS媒體查詢(Media Queries)和JavaScript判斷瀏覽器設(shè)備類型的方法
有無數(shù)的理由要求我們?cè)谌魏螘r(shí)候都應(yīng)該知道用戶是使用的什么設(shè)備瀏覽我們的網(wǎng)站——寬屏,普通屏,平板,手機(jī)?知道這些特征,我們web應(yīng)用的CSS和JavaScript才能同步做相應(yīng)2014-04-03CSS3媒體查詢實(shí)現(xiàn)不同寬度的下不同內(nèi)容的展示功能
這篇文章主要介紹了CSS3媒體查詢實(shí)現(xiàn)不同寬度的下不同內(nèi)容的展示功能,本章節(jié)我們將為大家演示一些多媒體查詢實(shí)例,需要的朋友可以參考下2023-11-27