Question

page in quesstion。我有一个棋盘，每个单元格都是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

Answer 1

网站上的CSS file中存在拼写错误（不在上面的代码段中）。

这里的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;
  }
}

具有背景图像的Div不会使用媒体查询进行缩放

1 个答案: