HTML5 Practice-Implementing responsive design with CSS3 Media queries

Reprint please indicate original address: http://www.cnblogs.com/softlover/archive/2012/11/21/2781388.html

The screen resolution now ranges from 320px (IPhone) to 2560px (large display) and even larger. The user is not just using a desktop computer to access a Web site, he uses a mobile phone, a laptop, a Tablet PC. So the traditional set of Web site width is fixed value, has been unable to meet the need. The web design needs to adapt to this new requirement, and the page layout needs to be automatically adjusted to the different resolutions of the access device. This tutorial will show you how to use HTML5 and CSS3 Media queries to complete a cross-browser responsive design.

Demo Preview Address: http://webdesignerwall.com/demo/adaptive-design/final.html

Demo:http://www.webdesignerwall.com/file/adaptive-design-demo.zip

Run for the first time

Before we start, we can look at the final demo to see the final results. Adjust the size of your browser and we can see that the page automatically adjusts the layout based on the size of the window.

more examples

　　You can visit the following address to see more relevant examples: WordPress themes. I designed the following media queries:tisa, Elemin, Suco, ITheme2, Funki, Minblr, and Wumblr.

Overview

By default, the width of the page container is 980px, and this size optimizes the resolution greater than 1024px. Media query is used to check the width of the viewport, and if less than 980px he becomes a narrow screen display mode, the page layout will replace the fixed width with the flowing width. If viewport is less than 650px, he will become mobile display mode, content, sidebar and other content will become a separate column layout, their width is full screen width.

HTML code

Here, I won't cover the details in the HTML code below. Here is the main frame of the layout page, we have a "pagewrap" container that Wraps "header", "Content", "sidebar", and "footer".

<div id= "Pagewrap" >    
 　　 Html5.js
Please note that I used the HTML5 tag in the demo, but IE9 before IE browser does not support 
<!--[if Lt IE 9]>    <script src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" ></script> <! [endif]-->
Cssset the HTML5 element as a block element
The following CSS will set HTML5 elements (article, aside, figure, header, footer, etc.) as block elements.
Article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section {     display:block;}
 　　 CSS Body Structure
I will not explain the details of the CSS file here. The width of the main container "pagewrap" of the page is set to 980px. The header is set to a fixed height of 160px. "Content" has a width of 600px and floats on the left. The "sidebar" width is set to 280px and floats on the right.
#pagewrap {    width:980px;    margin:0 Auto;} #header {    height:160px;} #content {    width:600px;    Float:left;} #sidebar {    width:280px;    Float:right;} #footer {    Clear:both;}
 　　 Step 1 Demo
We can view the current effect via demo. We have not yet used media queries to adjust the browser width and the page layout will not change.
CSS3 Media Query
You can learn more through the HTML5 practice-CSS3 Media Queries.
 　　 contains Media Queries javascript files
IE8 and previous browsers do not support CSS3 media queries, and you can add css3-mediaqueries.js to the page to solve this problem.
<!--[if Lt IE 9]>    <script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/ Css3-mediaqueries.js "></script><! [endif]-->
 　 contains Media Queries CSS
Create the CSS that is required for media query, and then add a reference to the page.
<link href= "Media-queries.css" rel= "stylesheet" type= "Text/css" >
 　　 viewport less than 980px (flow layout)
When viewport is less than 980px, the following rules apply:

 
 

  
  
 
   
Pagewrap = width set to 95%
 
   
Content = Width set to 60%
 
   
Sidebar = width set to 30%
 
  
 
 
Tips: Use percentages (%) to make the container non-stationary.
@media screen and (max-width:980px) {    #pagewrap {        width:95%;    }    #content {        width:60%;        padding:3% 4%;    }    #sidebar {        width:30%;    }    #sidebar. Widget {        padding:8% 7;        margin-bottom:10px;}    }
 　　 viewport less than 650px (single row layout)
When viewport is less than 650px, the following rules apply:

 
 

  
  
 
   
Header = Set Height to auto
 
   
Searchform = reset position of Searchform 5px top
 
   
Main-nav = set position to static
 
   
Site-logo = set position to static
 
   
Site-description = set position to static
 
   
Content = Set width to auto (which makes the container width fullwidth), and get rid of floating
 
   
Sidebar = set width to 100% and get rid of floating
 
  
 
 
@media screen and (max-width:650px) {    #header {        height:auto;    }    #searchform {        position:absolute;        top:5px;        right:0;    }    #main-nav {        position:static;    }    #site-logo {        margin:15px 100px 5px 0;        position:static;    }    #site-description {        margin:0 0 15px;        position:static;    }    #content {        width:auto;        Float:none;        margin:20px 0;    }    #sidebar {        width:100%;        Float:none;        margin:0;}    }
viewport less than 480px
The following CSS is to cope with less than 480px screen, the iphone is the width of the horizontal screen.

 
 

  
  
 
   
HTML = Disables text resizing. By default, the iphone increases the font size, which makes it easier to read. You can use-webkit-text-size-adjust: none; 来取消这种设置。
 
   
Main-nav = font size set to 90%
 
  
 
 
@media screen and (max-width:480px) {    html {        -webkit-text-size-adjust:none;    }    #main-nav a {        font-size:90%;        padding:10px 8px;    }}
Elastic picture
To make the image size more flexible, you can simply add max-width:100% andheight:auto。这种方式在IE7中正常工作，不能在IE8中工作，需要使用 width:auto\9 来解决这个问题。
img {    max-width:100%;    Height:auto;    width:auto\9; /* IE8 */}
Elastic embedded Video
To make embedded video more resilient, you can also use the method above. But for some reason, max-width:100% does not work properly in the embedded resource in Safari browser. We need to use width:100% to replace him.
. Video Embed,.video object,.video iframe {    width:100%;    Height:auto;}
Initial-scale Meta Tag (iPhone)
By default, the iphone's Safari browser shrinks the page to fit his screen. The following statement tells the iphone's Safari browser to use the device width as the width of the viewport, and disables Initial-scale.
<meta name= "viewport" content= "width=device-width; initial-scale=1.0 ">
Final effect
View the final demo, resize the browser, and view the behavior of media query. You can also use the iphone, IPad, new BlackBerry, and Android to see the effects of the Modile version.
Summarize　　Reliable Media Queries Javascript
You can use Css3-mediaqueries.js to resolve issues where the browser does not support media queries.
<!--[if Lt IE 9]>    <script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/ Css3-mediaqueries.js "></script><! [endif]-->
 　　 CSS Media Queries
This technique allows you to create an adaptive design that overrides the layout of the CSS based on the width of the viewport.
@media screen and (max-width:560px) {    #content {        width:auto;        Float:none;    }    #sidebar {        width:100%;        Float:none;}    }
 　　 Elastic Picture
Using max-width:100% and Height:auto, you can make your pictures more resilient.
img {    max-width:100%;    Height:auto;    width:auto\9; /* IE8 */}
 　　 Elastic Inline Video
Using width:100% and Height:auto, you can make inline video more resilient.
. Video Embed,.video object,.video iframe {    width:100%;    Height:auto;}
 　　 webkit font Size adjustment
Use-webkit-text-size-adjust:none to disable font resizing on your iphone.
HTML {    -webkit-text-size-adjust:none;}
 　　 set iphone Viewport and Initial scale
The following statement implements the viewport and inital scale settings in the iphone, using the META tag.
<meta name= "viewport" content= "width=device-width; initial-scale=1.0 ">
Well, today's tutorial ends here.
Original address: Http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
HTML5 Practice-Implementing responsive design with CSS3 Media queries