javascript - 如何为响应式网页设计设计元素样式？

Question

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

注意:我已经将饼图创建为 React 组件。

Chartist 图例文档: https://github.com/CodeYellowBV/chartist-plugin-legend/blob/master/index.html

代码:

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 .ct-legend li.inactive:before {
  background: transparent;
}

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

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

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

屏幕截图(适用于小屏幕和大屏幕):

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

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

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

Answer 1

为了做出响应，您必须为您的 css 编写媒体查询拿这个链接here sample 和这个one详细断点