Div比它应该宽得多

时间:2016-06-30 18:12:05

标签: css responsive-design resize

我正在尝试让我的网站更适合移动设备。我有一些图表看起来最好,当它们可以很宽(800px),但我更希望它们在移动设备上收缩而不是滚动条。我已将其添加到样式表中:

heroku login 

Git init

heroku create

git add . 

git commit -am "give some comment"

git push heroku master

并在我的母版页中包含:

@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;
    }
}

这是一个包含图表的div:

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

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

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

好的,如果我理解正确的话,你试图将最大宽度设置为800px,如果屏幕的宽度大于600px。如果屏幕大于800px,如何具体地将div的宽度设置为800px?

好吧,我能想到的另一件事是它调用另一个css块,你将max-width设置为100%。也许因为它的名字是相同的,所以我不知道。您可以尝试评论该行,然后尝试查看会发生什么。对不起我编辑而不是评论我刚开始所以我不能发表评论......?

答案 2 :(得分:0)

这样做(并确保在使用库时最后加载自定义CSS)

根据评论进行更新

由于内联样式工作,请像这样添加!important,它应该可以正常工作

width: 800px !important;
max-width: 100% !important;

如果确实有效,你会有其他规则覆盖这些规则,否则它们会在没有!important 的情况下工作

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

@media screen and (max-width:800px){
    div.graph {
        max-width: 100%;
    }
}
&#13;
<div class="graph" id="myDiv" ></div>
&#13;
&#13;
&#13;

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

&#13;
&#13;
div.graph{
  width: 800px;
  max-width: 100%;
  margin: auto;
  height: 150px;
  background: red
}
&#13;
<div class="graph" id="myDiv" ></div>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

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

可能还会尝试更具体的选择器?例如:

body div#id div.graph{}

(我不能发表评论,抱歉,如果这不是答案)