做到真正的响应式布局

timeline/css/timeline.css

@@ -17,7 +17,7 @@
 * timeline skin style.
 *
 * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
-* @version 1.0.1.1, Feb 20, 2013
+* @version 1.0.1.2, Jun 6, 2013
 */
 /* start reset */
 html, body {
@@ -32,6 +32,7 @@ body {
     font: 0.81em Verdana, arial, '\5fae\8f6f\96c5\9ed1';
     color: #666666;
     background-color: #363A3D;
+    overflow-y: scroll;
 }
 
 button,
@@ -364,7 +365,7 @@ a:hover > .ico-pre {
 
 /* start framework */
 .wrapper {
-    min-width: 500px;
+    min-width: 400px;
     padding: 50px 0;
     background: url("../../timeline/images/bg.png") repeat scroll 0 0 #DEE4EA;
 }
@@ -718,6 +719,12 @@ article .article-title a {
     white-space: nowrap;
 }
 
+.index-nav-abs {
+    padding: 0;
+    position: fixed;
+    max-width: 160px;
+}
+
 .nav-abs li {
     background-color: #DEDDDD;
     border: 1px solid #6B6B6B;
@@ -749,4 +756,199 @@ article .article-title a {
     background-color: #353535;
     color: #fff;
 }
-/* end others */
+/* end others */
+
+/* start responsive */
+@media (max-width: 650px) {
+    .wrapper {
+        min-width: 200px;
+    }
+    
+    #top > .left {
+        display: block;
+        float: none;
+        width: 100%;
+    }
+
+    #top > a {
+        display: block;
+        float: none !important;
+    }
+
+    #hideTop {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+
+    #admin {
+        display: block;
+        float: none
+    }
+
+    #admin > a {
+        border-right-width: 0 !important;
+        display: block;
+        float: none !important;
+        line-height: 26px !important;
+        margin: 0 !important;
+    }
+
+    .container {
+        width: 100%;
+    }
+
+    .header {
+        height: auto;
+    }
+
+    .header > .container > div {
+        height: 50px;
+        float: none;
+        margin-left: 10px;
+    }
+
+    .header > .container > ul {
+        float: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .header > .container li {
+        float: none;
+        padding: 3px 10px;
+    }
+
+    .header > .container li > a {
+        padding: 0;   
+        display: block;
+    }
+
+    .header > .container li:hover {
+        background-color: #FFFFFF;
+        background-image: linear-gradient(#FFFFFF,#E5E5E5);
+        background-image: -ms-linear-gradient(#FFFFFF,#E5E5E5);
+        background-image: -o-linear-gradient(#FFFFFF,#E5E5E5);
+        background-image: -webkit-linear-gradient(#FFFFFF,#E5E5E5);
+        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E5E5E5');
+    }
+
+    .header > .container > form {
+        float: none;
+        margin: 10px;
+    }
+
+    #search {
+        margin-top: 0;
+    }
+
+    #search:focus {
+        width: 92%;
+    }
+
+    .footer > .container > .left {
+        display: none;
+    }
+
+    .footer > .container > .right {
+        float: none;
+        padding: 0 10px;
+        line-height: 19px;
+    }
+
+    .footer > .container > .right > .left {
+        float: none;
+    }
+
+    .nav-abs {
+        position: inherit !important;
+        padding: 0;
+        background-color: transparent;
+        box-shadow: none;
+        border-width: 0;
+        max-width: none !important;
+    }
+
+    .index-nav-abs {
+        margin: 0;
+    }
+
+    .nav-abs li {
+        float: none;
+        width: auto;
+    }
+
+    .author,
+    .ico-reply {
+        margin-left: 75px;
+        display: block;
+    }
+
+    .comments > li > div > div.article-body {
+        padding-left: 0;
+    }
+
+    .dynamic-l,
+    .dynamic-r {
+        float: none;
+        width: auto;
+    }
+
+    .dynamic-l > div {
+        margin-right: 0;
+    }
+
+    .articles .arrow,
+    .articles .dot,
+    #admin > span,
+    .ft-next,
+    .ft-pre {
+        display: none;
+    }
+
+    .articles {
+        padding-bottom: 10px;
+    }
+
+    .articles article {
+        float: none;
+        width: auto;
+    }
+
+    .articles > div.fn-clear > h2 {
+        margin-bottom: 40px;
+    }
+}
+
+
+@media (max-width: 360px) {
+    .ico {
+        display: block;
+        float: none;
+        line-height: 19px;
+    }
+
+    .dynamic-r .ico {
+        float: right;
+    }
+
+    #commentForm label,
+    #replyForm label {
+        display: block;
+    }
+
+    .footer > .container > .right > .left > span {
+        display: block;
+    }
+
+    .ico-translate {
+        display: block;
+        float: none;
+        margin-left: 0;
+    }
+
+    .ico-top {
+        bottom: 114px;
+    }
+}
+/* end responsive */