antd栅格，在PC端分辨率，缩放大于100%时不生效

这个问题也是花费了小半天时间，在1920*1080分辨率，默认缩放125%时候，antd的栅格没生效

List卡片：

<List<Partial<any>>
  rowKey="ID"
  grid={{ gutter: 24, xxl: 4, lg: 4, md: 4, sm: 1, xs: 1 }}
  dataSource={list.noPay.listdata}
  renderItem={(item) => {
    return (
      <List.Item key={item.ID}>
        <Card
          hoverable
          className={styles.card}
        >
          <div className={styles.cardhead}>
            <a onClick={showDrawer} key={`a-${item.id}`}>
              <Card.Meta
                avatar={<img alt="" className={styles.cardAvatar} src={UBIGlobalConst.baseUrl + 'assets/img/pdm/noPay.png'} />}
                title={<Tooltip title={item.CusName}><span>{item.CusName}</span></Tooltip>}
                description={
                  <div className={styles.subtitle} title={item.BackAmount}>开票金额:{item.BackAmount}</div>
                }
              />
            </a>
          </div>
          <Row>
            <Col span={24}>
              <DescriptionItem title="货物名称" content={item.Partys} />
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <DescriptionItem title="关联合同" content={item.ContractName} />
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <DescriptionItem title="预计到账日期" content={item.BackDate} />
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Dropdown overlay={menuAction}>
                <span className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                  状态：{item.BackStatus} <DownOutlined />
                </span>
              </Dropdown>
              <Progress percent={50} size="small" status="active" title="已开票比率%" />
            </Col>
          </Row>
        </Card>
      </List.Item>
    );
  }}
/>

 

解决方式：

1. 修改电脑的缩放，设置“缩放与布局”为100%，这种方式不可取，不能所有大分辨率的pc都设置一遍

 

2. 在媒体适配里写device-pixel-ratio适配像素比，另外，可以把组件由px转换为rem，以达到动态缩放的目的。

加一段自定义样式，这种方式是能解决，但是要更改最基本的栅格样式。

//分辨率最小1600
@media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 2.1),
(-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 2.1),
(min-resolution: 1.09dppx) and (max-resolution: 2.1dppx) {
  //卡片效果  兼容1920*1080栅格不生效问题
  .mcardtrd {
    .cards {
      :global {
        .ant-spin-container>.ant-row>.ant-col {
          padding-left : 12px;
          padding-right: 12px;
          flex         : 1 1 auto;
          width        : 20%;
          max-width    : 20%;
        }
      }
    }
  }
}

结语：目前还没有更优美有效的解决方式，还需要研究一下。