CSS怎么進行響應式設計

這篇文章主要講解了“CSS怎么進行響應式設計”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS怎么進行響應式設計”吧！

　　一、什么是媒體查詢

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

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

　　二、@media媒體查詢的使用

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

　　<metaname="viewportcontent="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

　　width=device-width:寬度等于當前設備的寬度

　　initial-scale=1：初始的縮放比例（默認為1）

　　maximum-scale=1：允許用戶縮放到得最大比例（默認為1）

　　user-scalable=no：用戶不能手動縮放

　　b.在CSS文件中寫響應式媒體查詢

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

　　舉例1：

　　@mediascreenand(max-width:480px){

　　body{

　　background:red

　　}

　　}

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

　　舉例2：

　　@mediascreenand(min-width:900px){

　　body{

　　font-size：20px

　　}

　　}

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

　　舉例3：

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

　　body{background-color:#f5f5f5;}

　　}

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

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

感謝各位的閱讀，以上就是“CSS怎么進行響應式設計”的內容了，經過本文的學習后，相信大家對CSS怎么進行響應式設計這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！