css - Div 比应有的宽得多

Question

我正在尝试让我的网站更适合移动设备。我有一些图表在非常宽(800 像素)时看起来最好，但我更希望它们在移动设备上缩小而不是滚动条。我已将其添加到样式表中:

@media screen and (max-width:600px){
    div.graph {
        max-width: 100%;
        margin: auto;
        height:400px;
    }
}
@media screen and (min-width:601px){
    div.graph{
        max-width: 800px;
        margin: auto;
        height: 400px;
    }
}

并将其包含在我的母版页中:

<link href="~/Styles/ResponsiveDesign.css" rel="stylesheet" type="text/css" />

这是保存图表的 div 之一:

<div class="graph" id="myDiv" ></div>

问题是，当我现在用浏览器全尺寸查看页面时，图表很大——远远超过 800 像素。即使我将最大宽度更改为像 25px 这样荒谬的东西，它仍然很大。有什么想法吗？

Answer 1

这样做(如果您使用库，请确保最后加载自定义 CSS)

根据评论更新

因为内联样式有效，所以像这样添加 !important 它应该有效

宽度:800px !important;
最大宽度:100% !important;

如果它确实有效，您确实有另一个规则覆盖这些规则，否则它们在没有 !important

的情况下也能正常工作

div.graph{
  width: 800px;
  margin: auto;
  height: 150px;
  background: red
}

@media screen and (max-width:800px){
    div.graph {
        max-width: 100%;
    }
}

<div class="graph" id="myDiv" ></div>

在这种特殊情况下，您实际上根本不需要媒体查询

div.graph{
  width: 800px;
  max-width: 100%;
  margin: auto;
  height: 150px;
  background: red
}

<div class="graph" id="myDiv" ></div>