/*当页面大于1200px 时，大屏幕，主要是PC 端*/
@media (min- 1200px) {
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min- 992px) and (max- 1199px) {
}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD和大屏手机*/
@media (min- 768px) and (max- 991px) {
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min- 480px) and (max- 767px){
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (min- 320px) and (max- 479px) {
}
如果文档宽度小于 300 像素则修改背景演示(background-color):
@media screen and (max- 300px) {
body {
background-color:lightblue;
}
}