diff --git a/src/layouts/PageHeaderLayout.js b/src/layouts/PageHeaderLayout.js
index 8ab201883fcc249ef8551cf03f7dfd70415dc05c..43ba3892dde0c71c16a3cbb5dfed2eecaf8c209a 100644
--- a/src/layouts/PageHeaderLayout.js
+++ b/src/layouts/PageHeaderLayout.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import { Link } from 'dva/router';
 import PageHeader from '../components/PageHeader';
+import styles from './PageHeaderLayout.less';
 
 export default ({ children, wrapperClassName, top, ...restProps }) => (
   <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
     {top}
     <PageHeader {...restProps} linkElement={Link} />
-    {children ? <div style={{ margin: '24px 24px 0' }}>{children}</div> : null}
+    {children ? <div className={styles.content}>{children}</div> : null}
   </div>
 );
diff --git a/src/layouts/PageHeaderLayout.less b/src/layouts/PageHeaderLayout.less
new file mode 100644
index 0000000000000000000000000000000000000000..a0c0a6efe6c5c8cbd606cadc143959bab71a275b
--- /dev/null
+++ b/src/layouts/PageHeaderLayout.less
@@ -0,0 +1,11 @@
+@import "~antd/lib/style/themes/default.less";
+
+.content {
+  margin: 24px 24px 0;
+}
+
+@media screen and (max-width: @screen-sm) {
+  .content {
+    margin: 24px 0 0;
+  }
+}