diff --git a/scripts/demo.js b/scripts/demo.js
index 454f496e2e..a81da08305 100644
--- a/scripts/demo.js
+++ b/scripts/demo.js
@@ -35,7 +35,7 @@ $(function () {
     },
 
     render() {
-      return <Select combobox style={{width: 260}}
+      return <Select combobox style={{width: '100%'}}
         onSelect={this.handleSelect}
         optionLabelProp="text"
         dropdownClassName="autoComplete"
diff --git a/site/templates/layout.html b/site/templates/layout.html
index 3ee61d5ade..0ebd53b9a3 100644
--- a/site/templates/layout.html
+++ b/site/templates/layout.html
@@ -106,6 +106,7 @@
           </li>
         </ul>
       </nav>
+      <div class="nav-phone-icon"></div>
     </header>
     <div class="main-wrapper">
       {% block aside %}{% endblock %} {% block content %}{% endblock %}
diff --git a/static/script.js b/static/script.js
index 3d63268a4e..f8743e5bcb 100644
--- a/static/script.js
+++ b/static/script.js
@@ -37,6 +37,10 @@ $(function() {
   // 移动 API 文档到演示下方
   $('.markdown #api').nextAll().andSelf().appendTo('.api-container');
 
+  $('.nav-phone-icon').click(function() {
+    $(this).prev().toggle();
+  });
+
   $.easing['jswing'] = $.easing['swing'];
   $.extend($.easing,{
     easeInCirc: function (x, t, b, c, d) {
diff --git a/static/style.css b/static/style.css
index 105ca60a2f..16fb09563e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -105,7 +105,7 @@ a.logo {
 .search {
   float: left;
   height: 22px;
-  padding: 0px 30px;
+  padding: 0px 0 0 30px;
   margin: 32px auto 0;
   border-left: 1px solid #EBEDEE;
   position: relative;
@@ -113,6 +113,7 @@ a.logo {
 
 #autoComplete {
   margin-top: -2px;
+  width: 230px;
 }
 
 #autoComplete .ant-select {
@@ -1883,10 +1884,31 @@ a.entry-link:hover .anticon-smile {
 
   .logo {
     margin: 10px;
-    width: 110px;
     height: auto;
   }
 
+  .nav {
+    position: absolute;
+    z-index: 1000;
+    top: 50px;
+    right: 0;
+    background: #fff;
+    overflow: hidden;
+    height: auto;
+    line-height: 50px;
+    margin-right: 0;
+    border: 1px solid #e9e9e9;
+    width: 50%;
+  }
+
+  .nav .bar {
+    display: none!important;
+  }
+
+  .nav ul li {
+    width: 100%;
+  }
+
   .nav-phone-icon {
     display: block;
     width: 49px;
@@ -1915,11 +1937,25 @@ a.entry-link:hover .anticon-smile {
     height: calc(100% - 86px);
   }
 
-  footer ul {
-    display: none;
+  .aside-container {
+    float: none;
+    width: auto;
   }
 
-  footer h3 {
-    display: block;
+  .main-container {
+    margin-left: 0;
+  }
+
+  .markdown {
+    width: 100%;
+  }
+
+  footer {
+    text-align: center;
+  }
+
+  footer ul li {
+    float: none;
+    width: auto;
   }
 }