@media（min-width：）和（max-width：）查询无法正常工作

Question

我正在使用@media查询将我的html页面转换为响应页面，但是我被困在将页面转换为响应页面的过程中。

我在用

@media(min-width:480px) and (max-width:959px)
{
   body
   {
       background-color:red;
   }
}

在我的CSS代码中

但是当我的浏览器宽度为942px时，背景颜色正在改变。 以及我为@media(min-width:480px) and (max-width:959px)编写的任何CSS代码。 CSS样式仅适用于（max-width :)。

有了这些错误/问题，我无法将我的HTML页面转换为响应页面。

Answer 1

始终使用此代码进行响应

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

  /*Your style put here*/

}

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

  /*Your style put here*/

}

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

  /*Your style put here*/

}

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

  /*Your style put here*/

}

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

  /*Your style put here*/

}

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

  /*Your style put here*/

}