响应式布局样例

<!DOCTYPE html>
<!-- saved from url=(0060)http://webdesignerwall.com/demo/responsive-design/index.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Demo: Responsive Design in 3 Steps</title>

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

<style type="text/css">

body {
    font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
    color: #669;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
h1 {
    font: bold 36px/100% Arial, Helvetica, sans-serif;
}

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
}
#header {
    height: 180px;
}
#content {
    width: 600px;
    float: left;
}
#sidebar {
    width: 300px;
    float: right;
}
#footer {
    clear: both;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max- 980px) {
    
    #pagewrap {
        width: 94%;
    }
    #content {
        width: 65%;
    }
    #sidebar {
        width: 30%;
    }

}

/* for 700px or less */
@media screen and (max- 700px) {

    #content {
        width: auto;
        float: none;
    }
    #sidebar {
        width: auto;
        float: none;
    }

}

/* for 480px or less */
@media screen and (max- 480px) {

    #header {
        height: auto;
    }
    h1 {
        font-size: 24px;
    }
    #sidebar {
        display: none;
    }

}

/* border & guideline (you can ignore these) */
#content {
    background: #f8f8f8;
}
#sidebar {
    background: #f0efef;
}
#header, #content, #sidebar {
    margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
    border: solid 1px #ccc;
}
</style>

</head>

<body>
    <div id="pagewrap">
    
        <div id="header">
            <h1>Header</h1>
            <p>Tutorial by Web Designer Wall(read related article)</p>
        </div>

        <div id="content">
            <h2>Content</h2>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
        </div>

        <div id="sidebar">
            <h3>Sidebar</h3>
            <p>text</p>
            <p>text</p>
        </div>
        
        <div id="footer">
            <h4>Footer</h4>
        </div>

    </div>
</body>
</html>