可能的解决方案之一包括

<meta name="viewport" content="width=device-width, initial-scale=1.0">

至head标记

您可能对提及样式的媒体查询的顺序有问题
check this fiddle，更改浏览器宽度以查看运行中的媒体查询

@media screen and (max-width : 1500px) {
    body {
        background: #000;
        border-top: 2px solid #DDDDDD;
    }
}

@media screen and (min-width : 768px) and (max-width : 1024px) {
    body {
        background: #fff;
        border-top: 2px solid #DDDDDD;
    }
}

这个小提琴工作正常，但是如果你改变媒体查询的顺序它就不会工作了...自己试试吧！
如果为一个属性找到多个样式，CSS始终选择声明的最后一个样式。

，例如：

@media (max-width: 1024px) {
  body {
    background: black;
  }
}

@media (max-width: 768px) {
  body {
    background: white;
  }
}

对于765px（* 因为两个m.q覆盖该宽度 *），所选择颜色将是white

有时可能会遗漏在数字末尾添加px

@media screen and (max-width: 1024)

这将不起作用，因此应按如下方式添加px

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

尝试

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

}

您还可以创建另一个文件，如下所示：smallScreen.css，并使用以下代码将其直接添加到主样式表下head标记中：

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" media="only screen and (max-width:768px) "href="/smallScreen.css" />

那么您也可以在新文件中添加样式。如果“only screen and...”不起作用，您可以避免使用：* 仅限 *

如果某人仍然面临问题，一个次要的原因可能是语法。
请确保您在{和}和（最大宽度：1500 px} ---〉之间提供了错误的空格-----〉

@media only screen and(max-width:1500px){
    body{
        background-color: coral;
    }
}

右边------〉

@media only screen and (max-width:1500px){
    body{
        background-color: coral;
    }
}

只有一个空格可以大大降低你沮丧程度。