我正在尝试让我的网站更适合移动设备。我有一些图表看起来最好,当它们可以很宽(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这样荒谬的东西,它仍然是巨大的。有什么想法吗?
答案 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
的情况下工作
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;
在这种特殊情况下,您实际上根本不需要媒体查询
div.graph{
width: 800px;
max-width: 100%;
margin: auto;
height: 150px;
background: red
}
&#13;
<div class="graph" id="myDiv" ></div>
&#13;
答案 3 :(得分:0)
我认为问题可能出在图形大小本身,你能检查元素并检查图形内容的大小吗?我的猜测是div是正确的大小,图表不是。我们需要知道如何创建图表以获取更多细节。你可以筛选或放置图表的演示吗?
可能还会尝试更具体的选择器?例如:
body div#id div.graph{}
(我不能发表评论,抱歉,如果这不是答案)