方法一、利用el-col的属性：
| xs | <768px 响应式栅格数或者栅格属性对象 |
| sm | ≥768px 响应式栅格数或者栅格属性对象 |
| md | ≥992px 响应式栅格数或者栅格属性对象 |
| lg | ≥1200px 响应式栅格数或者栅格属性对象 |
| xl | ≥1920px 响应式栅格数或者栅格属性对象 |
方法二、利用@media
@media 是 CSS 中的一个规则，用于定义媒体查询。它可以检查渲染文档的设备或浏览器窗口的特性（如宽度、高度等），并根据这些特性应用不同的样式规则。简单来说，@media 用于实现响应式设计，使页面在不同尺寸的设备上显示得更合适。
如：
@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;
}
}
方法三、使用比例，而不是数值
如width:98% width:98vw
方法四、计算
代码里通过screen或window的属性来计算
css里使用calc函数，如width: calc(50% - 100px);
