Question

我目前正在使用宽屏显示器，并希望将我的网站调整为普通显示器，因此如果用户使用宽屏或普通显示器，尺寸会适应，尝试在屏幕较小时简单地减小4个div的宽度但似乎没有工作

这是我的代码：

<div class="ManagementReportTiles" style="float: left; width: 400px; height: 200px; text-align:center">                      <div><uc2:FontAwesome ID="FontAwesome1" runat="server" FontAwesomeFont="fa_pencil" FontAwesomeStyle="color:orange;" FontAwesomeSize="fa_3x" />  </div></div>
<div class="ManagementReportTiles" style="float: left; width: 400px; height: 200px; text-align:center; margin-left:10px;">  <div><uc2:FontAwesome ID="FontAwesome2" runat="server" FontAwesomeFont="fa_power_off" FontAwesomeStyle="color:red;" FontAwesomeSize="fa_3x" />   </div></div>
<div class="ManagementReportTiles" style="float: left; width: 400px; height: 200px; text-align:center; margin-left:10px;">  <div><uc2:FontAwesome ID="FontAwesome3" runat="server" FontAwesomeFont="fa_copyright" FontAwesomeStyle="color:white;" FontAwesomeSize="fa_3x" /> </div></div>
<div class="ManagementReportTiles" style="float: left; width: 400px; height: 200px; text-align:center; margin-left:10px;">  <div><uc2:FontAwesome ID="FontAwesome4" runat="server" FontAwesomeFont="fa_gear" FontAwesomeStyle="color:blue;" FontAwesomeSize="fa_3x" />       </div></div>

和我的媒体查询

.ManagementReportTiles {
     background-color: #E8E8E8;
        width:100%;
    }

@media screen and (max-width:790px){

    .ManagementReportTiles{
        width:200px;
    }
}

此时div的宽度为400，但当屏幕变小时，将宽度更改为200

提前致谢！：）

Answer 1

您的宽度正在被标记中的width: 400px覆盖，或者您删除了此样式，或者您将width: 200px !important放入css

Answer 2

试试这个：

@media screen and (max-width:790px){

    .ManagementReportTiles{
        width:200px !important;
    }
}

Answer 3

这是将CSS规则放在style属性中的主要原因被认为是不好的做法。它具有非常高的特异性（只能在样式表中使用!important覆盖），并且您无法在其中使用@media个查询。

所以正确的方法是将规则从style放到CSS：

＆＃13;

.ManagementReportTiles {
  float: left;
  width: 400px;
  height: 200px;
  text-align: center;
  /* added this so they are visible */
  background-color: #eee;
  margin-bottom: 10px;
}

.ManagementReportTiles+.ManagementReportTiles {
  margin-left: 10px;
}

.ManagementReportTiles:nth-child(1) .fa { color: orange;}
.ManagementReportTiles:nth-child(2) .fa { color: red;}
.ManagementReportTiles:nth-child(3) .fa { color: black;}
.ManagementReportTiles:nth-child(4) .fa { color: blue;}

@media screen and (max-width:820px) {
  .ManagementReportTiles {
    width: calc((100% / 2) - 9px);
  }
  .ManagementReportTiles:nth-child(2n + 1) {
    margin-left: 0;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div>
<div class="ManagementReportTiles">
  <div>
    <i class="fa fa-pencil fa-x3"></i>
  </div>
</div>
<div class="ManagementReportTiles">
  <div>
    <i class="fa fa-power-off fa-x3"></i>
  </div>
</div>
<div class="ManagementReportTiles">
  <div>
    <i class="fa fa-copyright fa-x3"></i>
  </div>
</div>
<div class="ManagementReportTiles">
  <div>
    <i class="fa fa-gear fa-x3"></i>
  </div>
</div>
</div>

＆＃13;

正如已经指出的那样，您可以使用!important，但这确实是错误的做法，它会降低您的代码的可扩展性和可维护性。从长远来看，与使用最佳实践相比，如果需要，您将无法快速轻松地实施更改。

Answer 4

您可以使用此媒体查询代替您的代码

@media screen and (max-width:790px){
.ManagementReportTiles{
    width:200px!important;
}

css - 媒体查询大小

4 个答案: