【前端响应式】媒体查询（@media）

功能：根据不同的页面属性（主要是宽度）设置不同的样式

基本用法

/*1.屏幕宽度在300px以上的样式*/
@media screen and (min-width:300px){
   

}
/*2.屏幕宽度在600px以下的样式*/
@media screen and (max-width:600px){
   

}
/*3.屏幕宽度在300px以上,600px以下的样式*/
@media screen and (min-width:300px) and (max-width:600px){
   

}

含义

(min-width:300px)								=>		屏幕宽度>300px时
(max-width:30