/* 大屏幕 */
@media (min- 1200px) { ... }
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min- 768px) and (max- 979px) { ... }
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max- 767px) { ... }
/* 横向放置的手机及分辨率更小的设备 */
@media (max- 480px) { ... }
作为开发者在自适应兼容各种屏幕的不同效果的时候可以再不同的屏幕范围内写改变后的css样式。