Using CSS3 Media queries to implement web-adaptive (GO)

Today's screen resolution is from 320px (IPhone) to 2560px (large display) or larger. People are no longer just browsing the web with desktops, they now have phones, tablets, and so on. Therefore, the traditional fixed-width design form will no longer be the best choice, web design needs to be self-adaptive. The layout of the Web page needs to be able to adjust automatically according to different resolutions and devices to achieve the best display results. The next step is to show how to use HTML5 and CSS3 to design an adaptive Web page.

Effect Preview Code Download

Let's see how it works.

Before you start, click the final preview to see how it works. Change the width of the browser and you will see that the page layout changes automatically.

Overview

When the screen resolution is greater than 1024px, the Web page width will be 980px. Use CSS3 Media query to verify the screen resolution, and if less than 980px, the width of the page will be adapted to replace the fixed width, and if less than 650px, the theme and sidebar (Content container and sidebar ) will be filled with the screen and displayed in a column.

HTML Code

The following is just the subject structure of the code, and I used the "pagewrap" container to Encapsulate "header", "Content", "sidebar", and "footer" together.

<div id= "Pagewrap" >
Html5.js
Please note that I used HTML5, but below IE9 version of IE browser does not support 
<!–[If lt IE 9]><script src= "http://html5shim.googlecode.com/svn/trunk/html5.js" ></script><! [endif]–>
CSS defines HTML5 elements as blocks (display:block;)
The following will be used CSS bar HTML5 elements (article, aside, figure, header, footer, etc.) defined as blocks
Article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, Nav, Section{display:block;}
CSS styles for the body structure
The "Pagewrap" container has a width of 980px,header height of 160px. " Content "Container is 600px wide and floats to the left, the sidebar" sidebar "is 280px wide and floats to the right.
#pagewrap {width:980px;margin:0 auto;} #header {height:160px;} #content {width:600px; float : Left;} #sidebar {width:280px; float : Right;} #footer {clear:both;}
First Step effect preview
First Step Demo: click on Me. Note that the Web page structure does not change after changing the width of the browser as it is not adaptive.
CSS3 Media Query (CSS3 media Query) medium queries script (media Queries Javascript)
IE8 or lower versions do not support CSS3 media queries, but this is accomplished by adding script css3-mediaqueries.js.
<!–[If lt IE 9]><script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/ Css3-mediaqueries.js "></script><! [endif]–>
Media query CSS (multimedia Queries CSS)
Create a new CSS stylesheet for media queries, see how media queries work see my previous tutorials (media queries)
<link href= "Media-queries.css" rel= "stylesheet" type= "Text/css" >
Resolution less than 980px (flow layout)
When the screen resolution is less than 980px, the following rules will be executed:

 
 

  
  
 
   
Pagewrap = width 95%
 
   
Content = width 60%
 
   
Sidebar = width 30%
 
  
 
 
@media screen and (max-95%60%;p adding:3% 4%30% 8% 7%;margin-bottom:10px;}}
Resolution less than 650px (one column layout)
When the screen resolution is less than 650px, the following rules will be executed:

 
 

  
  
 
   
Header = width is automatic (auto)
 
   
searchform = search box 5px from top (re-position the searchform to 5px top)
 
   
Main-nav = static arrangement
 
   
Site-logo = static arrangement
 
   
Site-description = static arrangement
 
   
Content = width is automatic and the float is canceled
 
   
Sidebar = width is 100% and the float is canceled
 
  
 
 
@media screen and (max-0;} #main-nav {position:static;} #site-logo {margin:15px 100px 5px 0;p osition:static;} #site-description {margin:0 0 15px;position:static;} #content {width:auto; float: none;margin:20px 0100%; float: none;margin:0;}}
Resolution less than 480px
Here are the CSS rules less than 480px, mainly for the iphone

 
 

  
  
 
   
HTML = cancels the text dimension style. By default the iphone will automatically adjust to fit, you can add "-webkit-text-size-adjust:none;" To cancel the automatic adjustment.
 
   
Main-nav = text size is 90%
 
  
 
 
@media screen and (max-width:480px) {
HTML {-webkit-text-size-adjust:none;}
#main-nav a {font-size:90%;p adding:10px 8px;}
}
Flexible display of images
To make the picture display more flexible, just set max-width:100% and Height:auto. However, max-width:100% and Height:auto run in IE7, but cannot run in IE8 (weird bugs), so you need to add IE8 for width:auto\9.
img {max-width:100%;height:auto;width:auto\9;/* IE8 */}
Flexible display of embedded class video
In order to make the embedded video display more flexible, you need to use the same method as above. Do not know what is the reason, max-width:100% (only video) can not be recognized by Safari, this time to use width:100% instead
. Video Embed,.video Object,.video iframe {width:100%;height:auto;}
Initialize META tag Initial scale meta tag (iPhone)
By default, the iphone's Safari browser will automatically zoom out of the page to display, using the META tag to make the page bytes appear as CSS styles.
<meta name= "viewport" content= "width=device-width; initial-scale=1.0 ">

Finally, I wrote an example of a self-adapting layout according to the documentation.

<Head><Metahttp-equiv= "Content-type"content= "text/html; CHARSET=GBK" /><Metaname= "Viewport"content= "Width=device-width, initial-scale=1"><!--Keep the width of the page consistent with the width of the device, without a horizontal scroll bar --<title> Adaptive Testing</title><styletype= "Text/css">Html,body{margin:0;padding:0;}Div{Display:Block;}. Content{width:1240px;margin:0 Auto;}. Div{width:600px;Height:400px;margin:10px;}#main1, #main3{float: Left;}#main2, #main4{float: Right;}@media screen and (max-width:980px){//Setting the width greater than 165 is less than 980, a two-column layout is displayed. . Content{width:100%;}. Div{width:45%;Height:600px;margin:10px;}#main1, #main3{float: Left;}#main2, #main4{float: Right;}} @media screen and (max-width:650px){//device visible width is less than 650, with streaming layout, in order to not affect the display of content, there is only one column layout. . Content{width:100%;}. Div{width:Auto;Height:400px;margin:10px;}#main1, #main3{float:None;}#main2, #main4{float:None;}}</style><!--[If Lt IE 9]> <script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" > </script> <! [EndIf] -</Head><Body>    <Divclass= "Content">        <DivID= "Main1"style= "background:red;"class= "Div"></Div>        <DivID= "Main2"style= "Background:blue;"class= "Div"></Div>        <DivID= "Main3"style= "Background:black;"class= "Div"></Div>        <DivID= "Main4"style= "Background:yellow;"class= "Div"></Div>    </Div></Body>
Using CSS3 Media queries to implement web-adaptive (GO)