CSS3中多媒體查詢的示例分析

小編給大家分享一下CSS3中多媒體查詢的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)長(zhǎng)期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為昔陽企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，昔陽網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

CSS2多媒體查詢：

@media規(guī)則在css2中有介紹，針對(duì)不同媒體類型(包括顯示器，便攜設(shè)備，電視機(jī)，等等)可以定制不同的樣式規(guī)則。

CSS3多媒體查詢：

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

多媒體查詢可以檢查很多事情：viewport(視圖)的寬和高，設(shè)備的寬和高，朝向，分辨率。

查詢語法：

　　@medianot|only|allmediatypeand(expressions){
　　css-sode;
　　}

not:排除某類型設(shè)備，only：只有某類型設(shè)備，all：所有的設(shè)備。

可以在不同的媒體上使用不同的樣式文件：

媒體類型：

all所有媒體

print打印機(jī)

screen電腦，平板，手機(jī)

speech屏幕閱讀器

媒體功能：

device-width/height：設(shè)備屏幕可見寬度/高度

height，width：頁面可見區(qū)域高，寬

max-device-width/height:屏幕可見最大寬度、高度。

以上是“CSS3中多媒體查詢的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：CSS3中多媒體查詢的示例分析
文章轉(zhuǎn)載：http://m.jiaotiyi.com/article/pcsjee.html