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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、山城網(wǎng)站維護(hù)、網(wǎng)站推廣。css是什么意思

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

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

一、什么是媒體查詢

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

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

二、@media 媒體查詢的使用

a.要在html文檔中添加以下代碼，用來兼容移動設(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：用戶不能手動縮放

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

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

舉例1：

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

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

舉例2：

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

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

舉例3：

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

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

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

分享題目：CSS用@media媒體查詢進(jìn)行響應(yīng)式設(shè)計的示例-創(chuàng)新互聯(lián)
地址分享：http://chinadenli.net/article16/ddehgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站營銷、品牌網(wǎng)站設(shè)計、網(wǎng)站制作、外貿(mào)建站、網(wǎng)站設(shè)計

廣告

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