Javascript 如何为响应性web设计的元素设置样式？

我使用chartist.js创建了饼图，但我无法创建响应性web设计。当我减小窗口大小时，即对于小窗口，图例应位于饼图上方，对于大窗口，图例应位于右侧。因此，对于大屏幕，它可以工作，但对于小屏幕，图例是重叠的。如何设置图例的样式，使其在小屏幕上位于饼图上方，而不与饼图重叠

注意：我已将piechart创建为react组件

图表图例文档：

代码：

反应组件，即饼图：

import React, { Component } from 'react';

var options = {
  width:200,
  height:200,
  showLabel:false,
  stackBars:true,
  plugins: [
        Chartist.plugins.legend()
  ]
};

class Pie extends Component {

  constructor(props){
    super(props);
  }
        const data = {
          labels: labels,
          series: dismissals
        };


    this.piechart = new Chartist.Pie('.ct-pie-chart', data, options);

  }

  render(){
    return(
      <div className="row">
          <div className="col-12 col-sm-6 col-lg-8">
                <div className="ct-pie-chart">
                    {this.piechart}
                </div>
          </div>
      </div>
    )}
}

export default Pie ;

屏幕截图（适用于小屏幕和大屏幕）：

我添加了以下css，但它不起作用：

.ct-pie-chart {
  display: flex;
  align-items: flex-start;
}

.ct-pie-chart .ct-legend {
  position: absolute;
  padding-left: 80px;
}

---

为了做出响应，您必须为css编写媒体查询

---

将此链接作为示例，将此链接作为详细信息断点

我已将CSS文件修改如下：

.ct-pie-chart .ct-legend li.inactive:before {
  background: transparent;
}

.piechart-title {
  text-align: center;
}

.ct-pie-chart .ct-legend.ct-legend-inside li{
  display: inline-block;
}

.ct-pie-chart .ct-legend li {
  margin: 2%;
}

.mychart {
  display: flex;
  align-items: flex-start;
  margin-left: 40%;
}

.ct-pie-chart .ct-legend {
  float: right;
}

在我的组件中：

<div className="mychart">
     <Pie/>
</div>

render(){
    return(
         <div className="ct-pie-chart">
             {this.piechart}
         </div>
    )
}

父组件：

<div className="mychart">
     <Pie/>
</div>

render(){
    return(
         <div className="ct-pie-chart">
             {this.piechart}
         </div>
    )
}

饼图组件：

<div className="mychart">
     <Pie/>
</div>

render(){
    return(
         <div className="ct-pie-chart">
             {this.piechart}
         </div>
    )
}

render（）{
返回(
{this.piechart}
)
}

---

进行上述更改可以正常工作，现在饼图和图例不会相互重叠。

我已经创建了flex box，现在是否应该为图表创建媒体查询？flex box和媒体查询是两个不同的东西。正如我上面提到的，您应该编写媒体查询以使图表响应。您知道如何使用媒体查询在小屏幕顶部添加图例。我知道，对于小屏幕，我应该使用

@media screen和（最小宽度：300px）{.ct pie chart.ct legend{}

但无法理解应该在其中插入什么，以便它显示在饼图的顶部，而不是重叠。您可以创建一个div，然后对该屏幕使用write media query，如下所示/*smartners scape*/@media only screen，（最小宽度：480px）{}您可以在此处查看get bootstrap示例