Using CSS3 to implement a simple responsive layout (code)

This article simply explains how to use CSS3 to implement a simple responsive layout:

CSS3 File:

*{margin:0px; padding:0px;}. heading,.container,.footing{margin:10px Auto;}.    heading{height:100px; background-color:red;}.    left,.right,.main{height:300px; Background-color:yellow;}.    footing{height:100px; Background-color:gray;} <!--media= "only screens and max-width:640px" means that this style sheet is used only when the width of the rendering screen is no more than 640px---@media    min-width:960px) {. Heading,. Container,. footing{width:960px;        }. Left,. Main,. right{float:left;    height:500px;    }. Left,. right{width:200px;        }. main{margin:0px 5px;    width:550px;    }. container{height:500px; }} @media screen and (min-width:600px) and (max-width:960px) {. Heading,. Container,. footing{width:600p    X        }. Left,. main{Float:left;    height:400px;    }. right{Display:none;    }. left{width:160px;        }. main{width:435px; Margin-left:5px;    }. container{height:400px;    }} @media screen and (max-width:600px) {. Heading,. Container,. footing{width:400px;        }. Left,. right{width:400px;    height:100px;        }. main{margin-top:10px;        width:400px;    height:200px;    }. right{margin-top:10px;    }. container{height:420px; }}

HTML5 file:

<! DOCTYPE html>
The code of this article can implement the same interface and display different layouts under different width of the rendering width.