@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、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。