Question

我正在尝试让我的网站更适合移动设备。我有一些图表看起来最好，当它们可以很宽（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这样荒谬的东西，它仍然是巨大的。有什么想法吗？

Answer 1

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

Answer 2

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

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

Answer 3

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

根据评论进行更新

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

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

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

＆＃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;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

body div#id div.graph{}

（我不能发表评论，抱歉，如果这不是答案）

Div比它应该宽得多

4 个答案: