建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)建站服務(wù)項目包括萊陽網(wǎng)站建設(shè)、萊陽網(wǎng)站制作、萊陽網(wǎng)頁制作以及萊陽網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，萊陽網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到萊陽省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
媒體查詢是 CSS 樣式表最重要的功能之一，所謂媒體查詢指的就是根據(jù)不同的媒體類型（設(shè)備類型）和條件來區(qū)分各種設(shè)備（例如：電腦、手機、平板電腦、盲文設(shè)備等），并為它們分別定義不同的 CSS 樣式。媒體查詢能讓 CSS 可以更精確的作用于不同的設(shè)備或同一設(shè)備的不同條件，讓所有用戶都能得到很好的用戶體驗。
1. 媒體類型
媒體類型用來表示設(shè)備的類別，CSS 中提供了一些關(guān)鍵字來表示不同的媒體類型，如下表所示：
| 媒體類型 | 描述 |
|---|---|
| all | 表示所有的媒體設(shè)備 |
| aural | 表示語音和音頻合成器（聽覺設(shè)備） |
| braille | 表示盲人用點字法觸覺回饋設(shè)備 |
| embossed | 表示盲人用點字法打印機 |
| handheld | 表示小型手持設(shè)備，如手機、平板電腦 |
| 表示打印機 | |
| projection | 表示投影設(shè)備 |
| screen | 表示電腦顯示器 |
| tty | 表示使用固定密度字母柵格的媒體，比如打字機或終端設(shè)備 |
| tv | 表示電視機類型的設(shè)備 |
2. 媒體特性
除了具體的類型外，還可以通過一些屬性來描述設(shè)備的具體特征，例如寬度、高度、分辨率等，如下表所示：
| 值 | 描述 |
|---|---|
| aspect-ratio | 輸出設(shè)備頁面可見區(qū)域的寬高比 |
| color | 輸出設(shè)備每個像素的比特值，常見的有 8、16、32 位。如果設(shè)備不支持輸出彩色，則該值為 0 |
| color-index | 輸出設(shè)備的顏色查詢表中的條目數(shù)量。如果沒有使用顏色查詢表，則該值等于 0 |
| device-aspect-ratio | 輸出設(shè)備的寬高比 |
| device-height | 輸出設(shè)備屏幕的可見高度 |
| device-width | 輸出設(shè)備屏幕的可見寬度 |
| grid | 查詢輸出設(shè)備使用的是網(wǎng)格屏幕還是點陣屏幕 |
| height | 頁面可見區(qū)域的高度 |
| max-aspect-ratio | 輸出設(shè)備屏幕可見區(qū)域?qū)挾扰c高度的最大比率 |
| max-color | 輸出設(shè)備每個像素比特值的最大值 |
| max-color-index | 輸出設(shè)備的顏色查詢表中的最大條目數(shù) |
| max-device-aspect-ratio | 輸出設(shè)備屏幕可見區(qū)域?qū)挾扰c高度的最大比率 |
| max-device-height | 輸出設(shè)備屏幕可見區(qū)域的最大高度 |
| max-device-width | 輸出設(shè)備屏幕的最大可見寬度 |
| max-height | 頁面可見區(qū)域的最大高度 |
| max-monochrome | 輸出設(shè)備單色幀緩沖區(qū)中每個像素的最大位深度。如果設(shè)備并非黑白屏幕，則該值為 0 |
| max-resolution | 設(shè)備的最大分辨率 |
| max-width | 頁面可見區(qū)域的最大寬度 |
| min-aspect-ratio | 輸出設(shè)備屏幕可見區(qū)域?qū)挾扰c高度的最小比率 |
| min-color | 輸出設(shè)備每個像素比特值的最小值 |
| min-color-index | 輸出設(shè)備的顏色查詢表中的最小條目數(shù) |
| min-device-aspect-ratio | 輸出設(shè)備的屏幕可見區(qū)域?qū)挾扰c高度的最小比率 |
| min-device-width | 輸出設(shè)備的屏幕的最小可見寬度 |
| min-device-height | 輸出設(shè)備的屏幕的最小可見高度 |
| min-height | 頁面可見區(qū)域的最小高度 |
| min-monochrome | 輸出設(shè)備單色幀緩沖區(qū)中每個像素的最小位深度。如果設(shè)備并非黑白屏幕，則該值為 0 |
| min-resolution | 設(shè)備的最小分辨率 |
| min-width | 頁面可見區(qū)域的最小寬度 |
| monochrome | 輸出設(shè)備單色幀緩沖區(qū)中每個像素的位深度。如果設(shè)備并非黑白屏幕，則該值為 0 |
| orientation | 頁面可見區(qū)域的旋轉(zhuǎn)方向 |
| resolution | 設(shè)備的分辨率。如：96dpi、300dpi、118dpcm |
| scan | 電視類設(shè)備的掃描工序 |
| width | 頁面可見區(qū)域的寬度 |
3. 邏輯操作符
邏輯操作符包含 not、and 和 only 三個，通過邏輯操作符可以構(gòu)建復(fù)雜的媒體查詢，您還可以通過逗號來分隔多個媒體查詢，將它們組合為一個規(guī)則。
- and：用于將多個媒體查詢組合成一條媒體查詢，當(dāng)每個查詢規(guī)則都為真時則該條媒體查詢?yōu)檎?，另外通過 and 操作符還可以將媒體特性與媒體類型結(jié)合在一起；
- not：用于否定媒體查詢，當(dāng)查詢規(guī)則不為真時則返回 true，否則返回 false。如果使用 not 操作符，則還必須指定媒體類型；
- only：僅在整個查詢匹配時才會生效，當(dāng)不使用 only 時，舊版的瀏覽器會將 screen and (max-width: 500px) 簡單地解釋為 screen，忽略查詢的其余部分，并將樣式應(yīng)用于所有屏幕。 如果使用 only 運算符，則還必須指定媒體類型。
4. 定義媒體查詢
目前您可以通過以下兩種方式來定義媒體查詢：
- 使用 @media 或 @import 規(guī)則在樣式表中指定對應(yīng)的設(shè)備類型；
- 用 media 屬性在