1.CSS to achieve responsive
CSS to implement the layout of the responsive site is to use the CSS in the media query next to a brief introduction:
@media type and (condition 1) and (condition two) {CSS style}
<link rel= "stylesheet" type= "Text/css" href= "Css/demo.css" media= "All and (max-width=980px)"/>
We only need to use the Max-width attribute, which defines the width of the page's visible area in the output device, to control the style of the change.
The HTML code is as follows:
<!doctype html>The DEMO01.CSS style is as follows:
body{ margin:0; Text-align:center;}. header{ height:100px; background-color:red;}. container{ height:400px; Background-color:pink;}. clearfix:after{ Display:block; Content: ""; Visibility:hidden; height:0; Clear:both;}. footer{ height:100px; Background-color:blue;}. left{ width:20%; Background-color:orange; Float:left; height:300px;}. center{ width:55%; Background-color:gray; Float:left; height:300px; margin:0 2.5%;}. right{ width:20%; Background-color:yellow; Float:left; height:300px;}The demo02 style is as follows:
body{ margin:0; Text-align:center;}. header{ height:100px; background-color:red;}. container{ height:400px; Background-color:pink;}. clearfix:after{ Display:block; Content: ""; Visibility:hidden; height:0; Clear:both;}. footer{ height:100px; Background-color:blue;}. left{ width:30%; Background-color:orange; Float:left; height:300px;}. center{ width:70%; Background-color:gray; Float:left; height:300px;}. right{ width:100%; Background-color:yellow; height:300px;}Style of demo03:
body{ margin:0; Text-align:center;}. header{ height:100px; background-color:red;}. container{ Background-color:pink;}. clearfix:after{ Display:block; Content: ""; Visibility:hidden; height:0; Clear:both;}. footer{ height:100px; Background-color:blue;}. left{ width:100%; Background-color:orange; height:300px;}. center{ width:100%; Background-color:gray; height:300px;}. right{ width:100%; Background-color:yellow; height:300px;}：
What appears when the window is larger than 1024px
When greater than 640 is less than 980, the right column is at the bottom
When less than 480, the navigation bar collapsed, the body three parts vertical display, if the window continues to shrink, does not change, the area is compressed
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
