媒体查询

@media screen and (max-width:770px){

            body{

            background-color: gold;

           }

  }

  @media screen and (max-width:600px){

           body{

           background-color: gold;

           }

        }

当以max-width做媒体查询时 ，需要从上到下书写（从大尺寸写到小尺寸），这样尺寸变化，颜色才会响应变化；

当尺寸小于770px，背景金色，当尺寸小于600px，背景蓝色；因为代码是从上到下执行的，后面的媒体查询条件也满足时，后面的样式会覆盖掉前面的样式

 

当以min-width做媒体查询时 ，需要从上到下书写（从小尺寸写到大尺寸），这样尺寸变化，颜色才会响应变化；原理同上