首先了解max-width和min-width的原理
其次了解 @media only screen and ( min-width: 980px ) 和 @media only screen and ( max-width: 980px ) 的原理
- @media only screen and ( max-width: 980px ){}
当页面小于960px时候执行其中的语句
- @media only screen and ( min-width: 980px ){}
当页面大于980px时候执行其中的语句
- @media screen and (min-width:960px) and (max-width:1200px){}
当页面宽度大于960px小于1200px时候执行其中的语句