3.媒体特性

width 定义输出设备中页面可见区域的宽度
min-width:定义输出设备中页面最小可见区域宽度
max-width:定义输出设备中页面最大可见区域宽度

这句话的意思就是：在我们屏幕上 并且 最大宽度是768像素 设置我们想要的样式
     @media screen and (max-width:768px) {
       .box{
           background-color: green;
       }
     } 
      @media screen and (max-width:500px) {
       .box{
           background-color: red;
       }
     } 
     媒体查询可以根据不同的屏幕尺寸在改变不同样式