Javascript 创建响应式容器

Question

我有一个较旧的网站，需要使其变得更加动态。该网站有一个嵌套在 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>

Answer 1

如果您使用 jQuery，您可以将宽度和高度设置为百分比，然后通过以下方式传递当前像素单位:

var stage = new Kinetic.Stage({
    container: 'conKinetic',
    width: $('#conKinetic').width(),
    height: $('#conKinetic').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>

希望对你有帮助!