本文小編為大家詳細(xì)介紹“媒體查詢是css3新增屬性的嗎”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“媒體查詢是css3新增屬性的嗎”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)建站專(zhuān)注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站制作、南山網(wǎng)絡(luò)推廣、成都小程序開(kāi)發(fā)、南山網(wǎng)絡(luò)營(yíng)銷(xiāo)、南山企業(yè)策劃、南山品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供南山建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

媒體查詢是css3的新增特性，可以進(jìn)行頁(yè)面的響應(yīng)式設(shè)計(jì)；使用“@media”查詢，可以用于針對(duì)不同的媒體類(lèi)型定義不通過(guò)的樣式，也可以針對(duì)不同的屏幕尺寸樣式設(shè)置不同的樣式，語(yǔ)法為“@media [媒體介質(zhì)] and|or (條件) and|or (條件){樣式}”。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。

媒體查詢是不是css3新增屬性

1.媒體查詢是css3新的特性，可進(jìn)行頁(yè)面的響應(yīng)式設(shè)計(jì)。

2.可以對(duì)不同的屏幕，不同的分辨率設(shè)計(jì)多套不同的樣式。

媒體查詢語(yǔ)法

@media [媒體介質(zhì)] and|or (條件) and|or (條件){
//樣式
.class{
}
}
//頁(yè)面可見(jiàn)高度小于等于500px時(shí)，設(shè)置字體大小為10px
@media screen and(max-height:500px){
.class{
font-size:10px
}
}

使用 @media 查詢，你可以針對(duì)不同的媒體類(lèi)型定義不同的樣式。

@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁(yè)面，@media 是非常有用的。

當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。

CSS 語(yǔ)法

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not, and, 和 only 可用于聯(lián)合構(gòu)造復(fù)雜的媒體查詢，您還可以通過(guò)用逗號(hào)分隔多個(gè)媒體查詢，將它們組合為一個(gè)規(guī)則。

not, only 和 and 關(guān)鍵字含義:

• not: not 運(yùn)算符用于否定媒體查詢，如果不滿足這個(gè)條件則返回 true，否則返回 false。 如果出現(xiàn)在以逗號(hào)分隔的查詢列表中，它將僅否定應(yīng)用了該查詢的特定查詢。 如果使用 not 運(yùn)算符，則還必須指定媒體類(lèi)型。

• only: only 運(yùn)算符僅在整個(gè)查詢匹配時(shí)才用于應(yīng)用樣式，并且對(duì)于防止較早的瀏覽器應(yīng)用所選樣式很有用。 當(dāng)不使用 only 時(shí)，舊版本的瀏覽器會(huì)將 screen and (max-width: 500px) 簡(jiǎn)單地解釋為 screen，忽略查詢的其余部分，并將其樣式應(yīng)用于所有屏幕。 如果使用 only 運(yùn)算符，則還必須指定媒體類(lèi)型。

• , (逗號(hào)) 逗號(hào)用于將多個(gè)媒體查詢合并為一個(gè)規(guī)則。 逗號(hào)分隔列表中的每個(gè)查詢都與其他查詢分開(kāi)處理。 因此，如果列表中的任何查詢?yōu)?true，則整個(gè) media 語(yǔ)句均返回 true。 換句話說(shuō)，列表的行為類(lèi)似于邏輯或 or 運(yùn)算符。

• and: and 操作符用于將多個(gè)媒體查詢規(guī)則組合成單條媒體查詢，當(dāng)每個(gè)查詢規(guī)則都為真時(shí)則該條媒體查詢?yōu)檎妫€用于將媒體功能與媒體類(lèi)型結(jié)合在一起。

媒體類(lèi)型（Media types）描述設(shè)備的一般類(lèi)別。除非使用 not 或 only 邏輯操作符，媒體類(lèi)型是可選的，并且會(huì)（隱式地）應(yīng)用 all 類(lèi)型。

你也可以針對(duì)不同的媒體使用不同樣式文件 :

讀到這里，這篇“媒體查詢是css3新增屬性的嗎”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。