Add screen reponsive className

package.json

@@ -58,6 +58,7 @@
     "jest": "^21.0.1",
     "lint-staged": "^4.3.0",
     "mockjs": "^1.0.1-beta3",
+    "react-container-query": "^0.9.1",
     "react-test-renderer": "^16.0.0",
     "redbox-react": "^1.3.2",
     "roadhog": "^1.2.1",

src/layouts/BasicLayout.js

@@ -6,6 +6,8 @@ import { connect } from 'dva';
 import { Link, routerRedux, Route, Redirect, Switch } from 'dva/router';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
+import { ContainerQuery } from 'react-container-query';
+import classNames from 'classnames';
 import styles from './BasicLayout.less';
 import HeaderSearch from '../components/HeaderSearch';
 import NoticeIcon from '../components/NoticeIcon';
@@ -16,6 +18,27 @@ import { getRouteData } from '../utils/utils';
 const { Header, Sider, Content } = Layout;
 const { SubMenu } = Menu;
 
+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,
+  },
+};
+
 class BasicLayout extends React.PureComponent {
   static childContextTypes = {
     location: PropTypes.object,
@@ -211,8 +234,7 @@ class BasicLayout extends React.PureComponent {
       openKeys: this.state.openKeys,
     };
 
-    return (
-      <DocumentTitle title={this.getPageTitle()}>
+    const layout = (
       <Layout>
         <Sider
           trigger={null}
@@ -339,6 +361,13 @@ class BasicLayout extends React.PureComponent {
           </Content>
         </Layout>
       </Layout>
+    );
+
+    return (
+      <DocumentTitle title={this.getPageTitle()}>
+        <ContainerQuery query={query}>
+          {params => <div className={classNames(params)}>{layout}</div>}
+        </ContainerQuery>
       </DocumentTitle>
     );
   }