CSS3的Media Queries實(shí)例分析

這篇“CSS3的Media Queries實(shí)例分析”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“CSS3的Media Queries實(shí)例分析”文章吧。

一、Media Queries 支持的屬性

屬性 值 Min/Max 描述color integer yes 每種色彩的字節(jié)數(shù)color-index integer yes 色彩表中的色彩數(shù)device-aspect-ratio integer/integer yes 寬高比例device-height length yes 設(shè)備屏幕的輸出高度device-width length yes 設(shè)備屏幕的輸出寬度grid integer no 是否是基于格柵的設(shè)備height length yes 渲染界面的高度monochrome integer yes 單色幀緩沖器中每像素字節(jié)resolution resolution yes 分辨率scan no tv媒體類型的掃描方式width length yes 渲染界面的寬度orientation Portrait/landscape no 橫屏或豎屏

height min-height max-heightdevice-width min-device-width max-device-widthdevice-height min-device-height max-device-heightaspect-ratio min-aspect-ratio max-aspect-ratiodevice-aspect-ratio min-device-aspect-ratio max-device-aspect-ratiocolor min-color max-colorcolor-index min-color-index max-color-indexMonochrome min-monochrome max-monochromeResolution min-resolution max-resolution

二、關(guān)鍵字

and - 結(jié)合多個(gè)媒體查詢not - 排除某種制定的媒體類型only - 用來(lái)定某種特定的媒體類型

三、引用樣式示例

<link rel="stylesheet" media="all" href="style.css" /><link rel="stylesheet" media="screen and (min-width:980px)" href="desktop.css" /><link rel="stylesheet" media="screen and (min-width:768px) and (max-width:980px)" href="pad.css" /><link rel="stylesheet" media="screen and (min-width:480) and (max-width: 768px)" href="phone.css" /><link rel="stylesheet" media="screen and (max-width:320px)" href="small.css" />

四、內(nèi)聯(lián)樣式示例

@media screen and (min-width: 980px) { //css code}@screen and (min-width:768px) and (max-width:980px) { //css code}@screen and (min-width:480) and (max-width: 768px) { //css code}@screen and (max-width:320px) { //css code}@media screen and (max-device-width: 480px) { //max-device-width等于480px}@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { //設(shè)備寬高比}@media all and (orientation:portrait) { //豎屏}@media all and (orientation:landscape) { //橫屏}

以上就是關(guān)于“CSS3的Media Queries實(shí)例分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。