html - @media (min-width: ) 和 (max-width: ) 查询无法正常工作

Question

我正在使用@media查询将我的 html 页面转换为响应式页面，但我坚持将我的页面转换为响应式页面。

我在用

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

在我的 CSS 代码中

但是当我的浏览器宽度为 942 像素时，背景颜色会发生变化。以及我正在编写的任何 CSS 代码@media(min-width:480px) and (max-width:959px)。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*/

}