@media 可以針對不同的屏幕尺寸設置不同的樣式,特別是如果你需要設置設計響應式的頁面,@media 是非常有用的,在大括號內,你可以編寫你所想要的樣式
/*當頁面大于1200px 時,大屏幕,主要是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 像素之間的屏幕里,超小屏幕,主要是手機*/
@media (min-width: 480px) and (max-width: 767px) { }
/*在小于480 像素的屏幕,微小屏幕,更低分辨率的手機*/
@media (max-width: 479px) { }
遠近互聯前端小華整理發布,希望能對學習技術的你有所幫助
遠近互聯專業提供網站建設、APP開發、網站優化、外貿網站SEO、微信運營的品牌整合營銷服務讓客戶通過網絡品牌建立與網絡傳播提高業績。






