Html 具有背景图像的Div未随媒体查询进行缩放

。我有一个棋盘，其中每个单元格都是一个div。我希望棋盘通过媒体查询放大到一定的最小宽度，但它没有这样做

单元由ngFor循环生成。黑色单元格为b类，白色单元格为w类，板外填充单元格（用于间距）为e类。 我正在更改媒体查询中这些div的填充和背景大小

当我重新缩放浏览器时，媒体查询正在正确移动我的菜单div。但它不会将背景图像和填充更改为e、b和w div

当设置为这些新维度时，电路板可以在没有介质查询的情况下进行渲染，因此似乎介质查询不起作用

以下是带有媒体查询的CSS块：

.b{
  float: left;
  border-width: 2px;
  border-style: solid;
  border-color: #a5a5a5;
  background-color:     #686868 ;
  background-size: 23.2px 23.2px;
padding: 10px;
}
.w{
  float: left;
  border-width: 2px;
  border-style: solid;
  border-color: #a5a5a5;
background-color: #e5e5e5;
  background-size: 23.2px 23.2px;
padding: 10px;
}
.board{
width: 100%;
display: flex;
padding: 10px;
}
.menu {
    width: 100%;
    order: 1;
  }
  .rewind{
  padding: 10px;
  }
@media (min-width: 1100px) {
  .menu {
    order: 1;
    width: 25%;
  }
  .board {
    order: 0;
    width: 75%;
  }
  .e{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
  .b{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
  .w{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
}

@media (min-width: 420px) {

  .e{
  background-size: 33.2px 33.2px;
padding: 15px;
  }
  .b{
  background-size: 33.2px 33.2px;
padding: 15px;
  }
  .w{
  background-size: 33.2px 33.2px;
padding: 15px;
  }

}

平台：所有浏览器，并使用Angular 1.5.8、Bootstrap 3.3.7

在您的网站上（而不是上面的代码片段中）有一个输入错误

这里的CSS类需要字母前的句点，而不是字母后的句点

更改后，电路板的大版本看起来不错。这能解决问题吗

@media (min-width: 420px) {

  e.{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
  b.{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
  w.{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
}

---

我还有两个相互排斥的媒体问题。