CSS怎么進(jìn)行響應(yīng)式設(shè)計(jì)

這篇文章主要講解了“CSS怎么進(jìn)行響應(yīng)式設(shè)計(jì)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS怎么進(jìn)行響應(yīng)式設(shè)計(jì)”吧！

　　一、什么是媒體查詢

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

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

　　二、@media媒體查詢的使用

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

　　<metaname="viewportcontent="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)式媒體查詢

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

　　舉例1：

　　@mediascreenand(max-width:480px){

　　body{

　　background:red

　　}

　　}

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

　　舉例2：

　　@mediascreenand(min-width:900px){

　　body{

　　font-size：20px

　　}

　　}

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

　　舉例3：

　　@mediascreenand(min-width:600px)and(max-width:900px){

　　body{background-color:#f5f5f5;}

　　}

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

　　總結(jié)：以上介紹了什么是媒體查詢@media，并舉例介紹媒體查詢的使用方法。

感謝各位的閱讀，以上就是“CSS怎么進(jìn)行響應(yīng)式設(shè)計(jì)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)CSS怎么進(jìn)行響應(yīng)式設(shè)計(jì)這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！