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>
.