@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式,特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁(yè)面,@media 是非常有用的,在大括號(hào)內(nèi),你可以編寫(xiě)你所想要的樣式
/*當(dāng)頁(yè)面大于1200px 時(shí),大屏幕,主要是PC 端*/
@media (min-width: 1200px) { }
/*在992 和1199 像素之間的屏幕里,中等屏幕,分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) { }
/*在768 和991 像素之間的屏幕里,小屏幕,主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) { }
/*在480 和767 像素之間的屏幕里,超小屏幕,主要是手機(jī)*/
@media (min-width: 480px) and (max-width: 767px) { }
/*在小于480 像素的屏幕,微小屏幕,更低分辨率的手機(jī)*/
@media (max-width: 479px) { }
遠(yuǎn)近互聯(lián)前端小華整理發(fā)布,希望能對(duì)學(xué)習(xí)技術(shù)的你有所幫助
遠(yuǎn)近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開(kāi)發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運(yùn)營(yíng)的品牌整合營(yíng)銷服務(wù)讓客戶通過(guò)網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績(jī)。






