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>

.

posted @ 2018-05-07 09:16  每天都要进步一点点  阅读(4829)  评论(0)  编辑  收藏  举报