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

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

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

CSS2多媒體查詢：

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

CSS3多媒體查詢：

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

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

查詢語法：

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

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

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

　　<link rel="stylesheet" media="mediatypeand|only|all(expressions)" href="print.css"/>

媒體類型：

all所有媒體

print打印機

screen電腦，平板，手機

speech屏幕閱讀器

媒體功能：

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

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

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

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

本文題目：CSS3中多媒體查詢的示例分析
分享鏈接：http://bm7419.com/article44/pcsjee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、微信小程序、、網(wǎng)站設(shè)計公司、營銷型網(wǎng)站建設(shè)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)