@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:)。

使用这些 bugs/issues 我无法将我的 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*/

}

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

@media (min-width: ) and (max-width: ) query not working Properly

html

css

responsive