仓库源文，站点原文

title: 那些年，我们一起玩过的响应式布局 categories:

• JavaScript
• 前端杂烩 tags:
• tech
• cnblogs warning: true date: 2013-08-11 12:17:00 fromUrl: http://www.cnblogs.com/hustskyking/archive/2013/08/11/responsive-web-desigin.html from: 博客园

<h3>什么是响应式布局</h3>

<h3>技术什么的不是关键，关键是设计</h3>

<h3>关于技术</h3>

<meta name="viewport" content="width=device-width; initial-scale=1.0">

<!--[if lt IE 9]>
     <script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script> <![endif]-->

<h3>关于测试工具</h3>

<h3>本文响应式布局代码</h3>

/*====================== media =========================*/
@media screen and (max-width: 480px) {
    html, body {
        background: none;
    }
    ul#topMnu,
    a.minyx,
    #rss,
    #sideLeft,
    #sideRight,
    #menu,
    #profile_block {
        display: none;
    }
    div#container {
        width: 96%;
        padding: 0 2%;
        min-width: 0 !important;
    }
    div#content {
        margin-right: 0;
        float: none;
        padding-top: 310px;
    }
    div#sidebar {
        margin-left: 0;
        width: 100%;
        float: none;
    }
    .commentbox_title,
    #tbCommentBody {
        width: 96%;
    }
    #about {
        position: absolute;
        width: 96%;
        top: 80px;
    }
    #div_digg {
        position: static;
    }
    #skyking-footer {
        margin-top: 30px;
        padding: 15px 20px 0;
    }
    #skyking-footer div {
        width: 100%;
    }
    #skyking-footer span {
        float: none;
        border: none;
        padding: 0;
        width: 100%;
        display: inline-block;
        margin-bottom: 15px;
    }
    #skyking-footer p {
        margin: 0;
        text-indent: 2em;
    }
}
@media screen and (min-width: 481px) and (max-width: 699px) {
    html, body {
        background: none;
    }
    ul#topMnu,
    a.minyx,
    #rss {
        display: none;
    }
    div#container {
        width: 96%;
        padding: 0 2%;
        min-width: 0 !important;
    }
    div#content {
        margin-right: 0;
        float: none;
    }
    div#sidebar {
        margin-left: 0;
        width: 100%;
        float: none;
    }
    #about {
        position: static;
    }
    .commentbox_title,
    #tbCommentBody {
        width: 96%;
    }
    #skyking-footer {
        margin-top: 30px;
        padding: 15px 20px 0;
    }
    #skyking-footer div {
        width: 100%;
    }
    #skyking-footer span {
        float: none;
        border: none;
        padding: 0;
        width: 100%;
        display: inline-block;
        margin-bottom: 15px;
    }
    #skyking-footer p {
        margin: 0;
        text-indent: 2em;
    }
    #div_digg {
        right: 15px;
    }
}
@media screen and (min-width: 700px) and (max-width: 960px) {
    div#container {
        width: 96%;
        padding: 0 2%;
        min-width: 0 !important;
    }
    #wrapper {
        overflow-x:hidden;
    }
    #skyking-footer div {
        width: 100%;
    }
    #skyking-footer span {
        float: left;
        margin-bottom: 15px;
        margin-left: 1%;
        width: 22%;
        min-height: 120px;
    }
    div#sidebar div#sideRight,
    div#sidebar div#sideLeft {
        float: none;
        width: auto;
    }
    div#content {
        margin-right: 32%;
    }
    div#sidebar {
        width: 30%;
        margin-left: -30%;
    }
    #about {
        position: static;
        display:none;
    }
    #div_digg {
        right: 15px;
    }
}

meida query

<h3>小结</h3>