怎么使用媒體查詢寫不同的css樣式

這篇文章主要為大家展示了“怎么使用媒體查詢寫不同的css樣式”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“怎么使用媒體查詢寫不同的css樣式”這篇文章吧。

　　響應式web實戰總結已經介紹了一些知識點，這里就不多介紹了；我們這邊來了解下如何使用媒體查詢寫不同的css樣式；針對響應式web設計開發，使用媒體查詢來適應不同的手機屏幕樣式開發時，我們需要寫不同的樣式，為此我們來分享下我個人開發響應式web頁面的經驗；針對目前手機的獨立像素有320，360，384，400，還有iphone6+是414的獨立像素，因此我們只需要針對目前這幾種匹配即可；

針對不同的手機有獨立的方法

　　針對手機獨立像素是360~399等屏幕的寬度

　　/*

　　*但是邊距字體大小等還是安裝360px來計算

　　*/

　　@media(min-width:360px)and(max-width:399px){}

　　針對手機獨立像素是320~359之間的

　　/*min-width:320px

　　*針對設備獨立像素為320px的css

　　*min-width:320和max-width:359之間

　　*/

　　@media(min-width:320px)and(max-width:359px){}

　　針對設備獨立像素為400px以上的樣式。

　　/*

　　*針對設備獨立像素為400px，邊距等等都按400px來計算

　　*/

　　@media(min-width:400px)and(max-width:450px){}

　　針對設備獨立像素為640px~999px的css

　　/*min-width:640px

　　*針對設備獨立像素為640px的css

　　*min-width:640和max-width:999之間

　　*邊距等按640px來計算

　　*/

　　@media(min-width:640px)and(max-width:999px){}

　　但是在PC端，我們為了適應PC端，所以針對寬度為1000以上也做一個顯示處理。

　　/*最小寬度1000樣式

　　*為了適應PC端所以PC端在設計時候默認以1000px來設計的

　　*/

　　@mediascreenand(min-width:1000px){}

以上是“怎么使用媒體查詢寫不同的css樣式”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！