javascript - 使用复杂对象创建响应式 div

Question

我正在创建一个包含图表/图像等的管理面板。

我没能让它响应。

所有图像都是 svg 的，我使用 charts.js 框架来创建饼图。

这是我的一个div的例子

这是 html:

<div class="row">
    <div class="col-md-6">
        <div class="alerts-chart-wrapper">
            <canvas id="alertsChart" style="float: left;"></canvas>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row alert-row">
            <div class="entitys-icons icon-1"> </div>
            <div class="alert-entity-name"> Users </div>
            <div class="entity-alerts-count">28</div>
        </div>
        ...(3 more rows)
    </div>
</div>

CSS:

.alert-row {
    padding: 0% 15% 3% 5%;
}

.entitys-icons {
    background: url('/Areas/WebApp/app/main_page_assets/02_general_alerts_icons.svg');
    background-repeat: no-repeat;
    width: 33px;
    height: 33px;
    background-size: 77px;
    float: left;
}

.entitys-icons.icon-1 {
    background-position: 0 2px;
}

.alert-entity-name {
    float: left;
    font-size: 0.75em;
    vertical-align: middle;
    line-height: 35px;
    padding-left: 2px;
}

.entity-alerts-count {
    float: right;
    vertical-align: middle;
    line-height: 35px;
    padding-left: 2px;
}

.alerts-chart-wrapper {
    width: 100%;
}

现在的问题是圆圈会根据分辨率变大和变小，但行不会变大和变小。

下面是宽度缩小时的问题截图(圆圈和第th行必须对齐):

这里使用的策略是什么？我想也许我会使用固定大小的媒体，但对我来说最好的解决方案是行高会相应地改变。

Answer 1

在head标签内，配置右视口(viewport)

<meta name="viewport" content="width=device-width,minimum-scale=1>