媒體查詢是css3新增屬性的嗎

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

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

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

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

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

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

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

媒體查詢語法

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

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

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

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

CSS 語法

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

not, and, 和 only 可用于聯(lián)合構(gòu)造復(fù)雜的媒體查詢，您還可以通過用逗號(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)算符，則還必須指定媒體類型。
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)算符，則還必須指定媒體類型。
, (逗號(hào)) 逗號(hào)用于將多個(gè)媒體查詢合并為一個(gè)規(guī)則。逗號(hào)分隔列表中的每個(gè)查詢都與其他查詢分開處理。因此，如果列表中的任何查詢?yōu)?true，則整個(gè) media 語句均返回 true。換句話說，列表的行為類似于邏輯或 or 運(yùn)算符。
and: and 操作符用于將多個(gè)媒體查詢規(guī)則組合成單條媒體查詢，當(dāng)每個(gè)查詢規(guī)則都為真時(shí)則該條媒體查詢?yōu)檎妫€用于將媒體功能與媒體類型結(jié)合在一起。

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

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

<!-- 寬度大于 900px 的屏幕使用該樣式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 寬度小于或等于 600px 的屏幕使用該樣式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

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

標(biāo)題名稱：媒體查詢是css3新增屬性的嗎
URL鏈接：http://muchs.cn/article22/jpggjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、Google、網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、服務(wù)器托管、企業(yè)建站

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

猜你還喜歡下面的內(nèi)容