开发指南074-自适应屏幕

方法一、利用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);