CSS3媒体查询解析

一、屏幕尺寸

• 老智能机：320px-480px
• 智能手机：≥480px
• 平板电脑：≥768px
• 中等屏幕（桌面显示器）：≥992px
• 大屏幕（大桌面显示器）：≥1200px

实现过程中，遵循移动优先原则

二、代码展示

 

/*超小屏幕（手机）*/
@media (min-width: 480px) {...}

/*小屏幕（平板）*/
@media (min-width: 768px) {...}

/*中等屏幕（桌面显示器）*/
@media (min-width: 992px) {...}

/*大屏幕（大桌面显示器）*/
@media (min-width: 1200px) {...}