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

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

　　響應(yīng)式web實(shí)戰(zhàn)總結(jié)已經(jīng)介紹了一些知識(shí)點(diǎn)，這里就不多介紹了；我們這邊來了解下如何使用媒體查詢寫不同的css樣式；針對(duì)響應(yīng)式web設(shè)計(jì)開發(fā)，使用媒體查詢來適應(yīng)不同的手機(jī)屏幕樣式開發(fā)時(shí)，我們需要寫不同的樣式，為此我們來分享下我個(gè)人開發(fā)響應(yīng)式web頁面的經(jīng)驗(yàn)；針對(duì)目前手機(jī)的獨(dú)立像素有320，360，384，400，還有iphone6+是414的獨(dú)立像素，因此我們只需要針對(duì)目前這幾種匹配即可；

針對(duì)不同的手機(jī)有獨(dú)立的方法

　　針對(duì)手機(jī)獨(dú)立像素是360~399等屏幕的寬度

　　/*

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

　　*/

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

　　針對(duì)手機(jī)獨(dú)立像素是320~359之間的

　　/*min-width:320px

　　*針對(duì)設(shè)備獨(dú)立像素為320px的css

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

　　*/

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

　　針對(duì)設(shè)備獨(dú)立像素為400px以上的樣式。

　　/*

　　*針對(duì)設(shè)備獨(dú)立像素為400px，邊距等等都按400px來計(jì)算

　　*/

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

　　針對(duì)設(shè)備獨(dú)立像素為640px~999px的css

　　/*min-width:640px

　　*針對(duì)設(shè)備獨(dú)立像素為640px的css

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

　　*邊距等按640px來計(jì)算

　　*/

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

　　但是在PC端，我們?yōu)榱诉m應(yīng)PC端，所以針對(duì)寬度為1000以上也做一個(gè)顯示處理。

　　/*最小寬度1000樣式

　　*為了適應(yīng)PC端所以PC端在設(shè)計(jì)時(shí)候默認(rèn)以1000px來設(shè)計(jì)的

　　*/

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

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