/*当页面大于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; } }