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

我认为你应该设置百分比。

Answer 2

好的，如果我理解正确的话，如果屏幕的宽度大于 600 像素，那么您正在尝试将最大宽度设置为 800 像素。如果屏幕大于800px，具体如何设置div的宽度为800px？

好吧，我唯一能想到的就是调用另一个 css 块，您将最大宽度设置为 100%。也许因为它的相同 class 名称，它正在这样做我不知道。您可以尝试注释掉该行并尝试查看会发生什么。抱歉，我正在编辑而不是评论我才刚刚开始，所以我不能评论...？

Answer 3

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

根据评论更新

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

width: 800px !important;
max-width: 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>

Answer 4

我认为问题可能出在图形大小本身，您可以检查元素并检查图形内容的大小吗？我的猜测是 div 是正确的大小，图表不是。我们需要知道您如何创建图表以获得更多细节。你能筛选或放一个图表演示吗？

可能还要尝试更具体的选择器？例如：

body div#id div.graph{}

（我无法发表评论，如果这不是答案，请见谅）

Div 比应有的宽得多

Div is much wider than it should be

css

resize

responsive-design