CSS用@media媒體查詢進(jìn)行響應(yīng)式設(shè)計(jì)的示例

這篇“CSS用@media媒體查詢進(jìn)行響應(yīng)式設(shè)計(jì)的示例”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“CSS用@media媒體查詢進(jìn)行響應(yīng)式設(shè)計(jì)的示例”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過(guò)這篇文章有所收獲，下面讓我們一起來(lái)看看具體內(nèi)容吧。

css是什么意思

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

隨著互聯(lián)網(wǎng)的發(fā)展，各種智能手機(jī)，平板這些移動(dòng)設(shè)備隨處可見。那如何讓我們的網(wǎng)站在各種移動(dòng)端設(shè)備上都能合理布局呢？ 為每一個(gè)設(shè)備寫一套代碼麻煩且工作量大。那么聰明的程序員們會(huì)用一套代碼，就能讓網(wǎng)站在不同大小的設(shè)備上合理顯示。因此，響應(yīng)式設(shè)計(jì)模型就產(chǎn)生了，其核心就是“媒體查詢”。

一、什么是媒體查詢

媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向：橫向或縱向）為其設(shè)定CSS樣式，媒體查詢由媒體類型和一個(gè)或多個(gè)檢測(cè)媒體特性的條件表達(dá)式組成。媒體查詢中可用于檢測(cè)的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁(yè)面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果。

使用 @media 查詢，你可以針對(duì)不同的媒體類型定義不同的樣式。@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁(yè)面，@media 是非常有用的。當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。

二、@media 媒體查詢的使用

a.要在html文檔中添加以下代碼，用來(lái)兼容移動(dòng)設(shè)備的顯示效果

<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

width=device-width:寬度等于當(dāng)前設(shè)備的寬度
initial-scale=1：初始的縮放比例（默認(rèn)為1）
maximum-scale=1：允許用戶縮放到得最大比例（默認(rèn)為1）
user-scalable=no：用戶不能手動(dòng)縮放

b.在CSS文件中寫響應(yīng)式媒體查詢

基本語(yǔ)法：@media 媒體類型  and （媒體特征）{樣式}

舉例1：

@media screen and (max-width:480px){
body {
background:red
  }
}

表示：當(dāng)屏幕小于或等于480px時(shí),頁(yè)面中的背景顏色變成紅色。

舉例2：

@media screen and (min-width:900px){
body{
font-size：20px
    }
}

表示：當(dāng)屏幕大于或等于900px時(shí),頁(yè)面中的字體大小變成20px。

舉例3：

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

表示：當(dāng)屏幕在600px~900px之間時(shí)，body的背景色為“#f5f5f5”。

感謝你的閱讀，希望你對(duì)“CSS用@media媒體查詢進(jìn)行響應(yīng)式設(shè)計(jì)的示例”這一關(guān)鍵問(wèn)題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！