CSS3媒體查詢(Media Queries)介紹
發(fā)布時間：2013-09-12 15:28:50 作者：佚名 
我要評論
我要評論媒體類型：all 所有設(shè)備、screen 電腦顯示器等等；媒體特性共13種，可以說是一個類似CSS屬性的集合，感興趣的朋友可以了解下本文，希望對大家有所幫助
媒體類型
all 所有設(shè)備
screen 電腦顯示器
handheld 便攜設(shè)備
tv 電視類型設(shè)備
print 打印用紙打印預(yù)覽視圖
關(guān)鍵字
and
not(排除某種設(shè)備)
only(限定某種設(shè)備)
媒體特性
媒體特性共13種，可以說是一個類似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時，應(yīng)用styleA，寬度在600px到800px之間時應(yīng)用styleB，以及寬度小于600px時應(yīng)用styleC。
not 和all
@media not handheld and （color）{樣式代碼} //用于除便攜之外的其他設(shè)備或非彩色便攜設(shè)備中
@media all and （not color）{樣式代碼} //用于所有非彩色設(shè)備中
only
only 關(guān)鍵字可能顯得有些多余，對支持Media Queries的瀏覽器來說確實(shí)是這樣，但很多時候only是用來對那些不支持Media Queries但是卻讀取Media Type的設(shè)備隱藏樣式表的
@media only screen add （color）{樣式代碼}
支持Media Queries的設(shè)備，正確應(yīng)用樣式，就仿佛only不存在
不支持Media Queries但正確讀取Media Type的設(shè)備，由于先讀取到only而不是screen，將忽略這個樣式
不支持Media Queries的IE不論是否有only，都忽略樣式
all 所有設(shè)備
screen 電腦顯示器
handheld 便攜設(shè)備
tv 電視類型設(shè)備
print 打印用紙打印預(yù)覽視圖
關(guān)鍵字
and
not(排除某種設(shè)備)
only(限定某種設(shè)備)
媒體特性
媒體特性共13種，可以說是一個類似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時，應(yīng)用styleA，寬度在600px到800px之間時應(yīng)用styleB，以及寬度小于600px時應(yīng)用styleC。
not 和all
@media not handheld and （color）{樣式代碼} //用于除便攜之外的其他設(shè)備或非彩色便攜設(shè)備中
@media all and （not color）{樣式代碼} //用于所有非彩色設(shè)備中
only
only 關(guān)鍵字可能顯得有些多余，對支持Media Queries的瀏覽器來說確實(shí)是這樣，但很多時候only是用來對那些不支持Media Queries但是卻讀取Media Type的設(shè)備隱藏樣式表的
@media only screen add （color）{樣式代碼}
支持Media Queries的設(shè)備，正確應(yīng)用樣式，就仿佛only不存在
不支持Media Queries但正確讀取Media Type的設(shè)備，由于先讀取到only而不是screen，將忽略這個樣式
不支持Media Queries的IE不論是否有only，都忽略樣式
相關(guān)文章
詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實(shí)戰(zhàn)(推薦)
這篇文章主要介紹了詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實(shí)戰(zhàn)(推薦),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的2020-11-16css3媒體查詢中device-width和width的區(qū)別詳解
這篇文章主要介紹了css3媒體查詢中device-width和width的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-03-27- 這篇文章主要介紹了css3 響應(yīng)式媒體查詢的示例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-25
CSS3中媒體查詢結(jié)合rem布局適配手機(jī)屏幕
這篇文章主要介紹了css3中媒體查詢結(jié)合rem布局適配手機(jī)屏幕,需要的朋友可以參考下2019-06-10- 這篇文章主要介紹了CSS3 Media Queries中媒體屬性的使用,文章中還以一個響應(yīng)式設(shè)計(jì)的例子作為補(bǔ)充講解,需要的朋友可以參考下2016-02-29
CSS3媒體查詢Media Queries基礎(chǔ)學(xué)習(xí)教程
這篇文章主要介紹了CSS3媒體查詢基本學(xué)習(xí)教程,包括基本的語法和邏輯操作符,以及媒體查詢可檢測的特性與利用viewport禁止用戶縮放等部分的內(nèi)容,需要的朋友可以參考下2016-02-29使用CSS媒體查詢(Media Queries)和JavaScript判斷瀏覽器設(shè)備類型的方法
有無數(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
