Javascript 创建响应式容器

【问题标题】：Javascript create a responsive containerJavascript 创建响应式容器
【发布时间】：2015-09-09 16:38:35
【问题描述】：

我有一个较旧的网站，我需要使其更具活力。该网站有一个嵌套在 div 中的图形图表。我遇到的问题是有 javascript 代码硬编码 div 容器的高度和宽度。我尝试将大小数量（350）更改为自动和百分比（10%），但它破坏了程序。我也无法弄清楚程序如何将整数值转换为像素值，但这可能只是我对 javascript 的无能。我可能错过了一些重要信息，所以如果您需要其他信息，请告诉我。谢谢

Javascript

var stage = new Kinetic.Stage({
    container: 'conKinetic',
    width: 1100,
    height: 350
});

HTML

<div class='fourthDiv' id="conKinetic">
    ....This div holds the graphics
</div>

【问题讨论】：

如果该类实际上是fourthDiv，我建议您立即删除该类，因为它违反了所有约定并且肯定会破坏可维护性。
如果您想操作容器内的画布布局，还应该查看有关使用Kinetic.js 的文档。

标签： javascript html containers

【解决方案1】：

如果你使用的是 jQuery，你可以将宽度和高度设置为百分比，然后通过这种方式传递当前的像素单位：

var stage = new Kinetic.Stage({
    container: 'conKinetic',
    width: $('#conKinetic').width(),
    height: $('#conKinetic').height()
});

当然，您可以编辑 width 或 height 值以使其适应您的布局：

width: $('#conKinetic').width() - 50,

考虑这个例子：

$(document).ready( function() {
    $('body').append( 'My width is 50%, equivalent to ' + $( '#hi' ).width() + ' px.');
});

body { width: 100%; }
#hi { width: 50%; background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hi">hello!</div>

希望对你有帮助！

【讨论】：