@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*/

}