react-container-query

1.媒体查询响应式组件

2.使用方法

（1）引入

import { ContainerQuery } from 'react-container-query';

（2）规定屏幕尺寸

/**
 * 媒体查询
 */
const query = {
  'screen-xs': {
    maxWidth: 575,
  },
  'screen-sm': {
    minWidth: 576,
    maxWidth: 767,
  },
  'screen-md': {
    minWidth: 768,
    maxWidth: 991,
  },
  'screen-lg': {
    minWidth: 992,
    maxWidth: 1199,
  },
  'screen-xl': {
    minWidth: 1200,
  },
};

（3）页面渲染

<ContainerQuery query={query}>
  {params => <div className={classNames(params)}>{layout}</div>}
</ContainerQuery>

.

2022-12-23
2022-12-23
2021-10-11
2022-12-23
2021-12-18
2021-06-23
2022-01-18
2021-04-06