HTML5 practice-implement responsive design using css3 media queries

Document directory

• First Run
• Overview
• HTML code
• CSS
• Css3 media Query
• Elastic Images
• Elastically embedded video
• Final Effect
• Summary

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

 

The screen resolution range is large, from 320px (iPhone) to 2560px (large display), or even greater. The user does not just use a desktop computer to access the web site. He uses mobile phones, laptops, and tablets. Therefore, the traditional website width setting is fixed and cannot meet the requirements. The web design needs to adapt to this new requirement, and the page layout needs to be automatically adjusted according to the different resolutions of the access device. This tutorial will show you how to use HTML5 and css3 media queries to implement cross-browser responsive design.

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

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

 

First Run

Before starting, we can view the final demo to view the final effect. Adjust the size of your browser. We can see that the page will automatically adjust the layout according to the size of the window.

More examples

　　You can visit the following address to see more 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, which optimizes the resolution greater than 1024px. Media query is used to check the viewport width. If it is less than 980px, it will change to the narrow screen display mode, and the page layout will replace the fixed width with the flow width. If the viewport is smaller than pixel PX, it will change to Mobile Display Mode. Content, sidebar, and other content will change to a separate column layout mode, and their width will fill the screen width.

 

HTML code

Here, I will not introduce the details in the following HTML code. The following is the main frame of the layout page. A "pagewrap" container encapsulates "Header", "content", "sidebar", and "footer ".

<div id="pagewrap">    
 
　　
Html5.js
Note that I used HTML5 labels in the demo. However, ie9 does not support new HTML5 labels such as 
<!--[if lt IE 9]>    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 
CSS
Set HTML5 elements to block elements
The following CSS sets the 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 subject structure
I will not explain the details of the CSS file here. The width of pagewrap is set to 980px. The header is set to a fixed height of 160px. The width of "content" is 600px, floating to the left. The width of "sidebar" is set to 280px, floating 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
You can use the demo to view the current effect. At this time, we have not used media queries to adjust the browser width, and the page layout will not change.
 
Css3 media Query
You can learn more through HTML5 practices-css3 media queries.
　　
Contains the media queries Javascript file
IE8 and earlier 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 required for media query and add references to the page.
<link href="media-queries.css" rel="stylesheet" type="text/css">
　　
Viewport less than 980px (flow layout)
When the viewport is smaller than 980px, the following rule is used:

 

 
  
Pagewrap = set the width to 95%
 
  
Content = width: 60%
 
  
Sidebar = width is set to 30%

 
TIPS: the percentage (%) can be used to make the container unfixed.
@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 smaller than pixel PX (Single Column Layout)
When the viewport is smaller than pixel PX, the following rule is used:

 

 
  
Header = set height to auto
 
  
Searchform = reset the position of searchform 5px top
 
  
Main-nav = set the location to static
 
  
Site-logo = set the location to static
 
  
Site-description = set the location to static
 
  
Content = set the width to auto (this will change the container width to fullwidth) and get rid of floating
 
  
Sidebar = set the 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 PX
The following CSS is used to deal with screen sizes smaller than PX. This is the width of the iPhone landscape screen.

 

 
  
Html = Disable text size adjustment. By default, the font size of the iPhone is increased to make it easier to read. You can use-WebKit-text-size-adjust: none; to cancel this setting.
 
  
Main-nav = set the font size to 90%

 
@media screen and (max-width: 480px) {    html {        -webkit-text-size-adjust: none;    }    #main-nav a {        font-size: 90%;        padding: 10px 8px;    }}
 
Elastic Images
To make the image size more elastic, you can simply addmax-width:100%AndHeight: auto. This method works normally in IE7 and cannot work in IE8.Width: auto \ 9 to solve this problem.
img {    max-width: 100%;    height: auto;    width: auto\9; /* ie8 */}
 
Elastically embedded video
To make the embedded video more elastic, you can also use the above method. But I don't know why. Max-width: 100% cannot work properly in Embedded resources in safari. We need to replace it with width: 100%.
.video embed,.video object,.video iframe {    width: 100%;    height: auto;}
 
Initial-scale meta tag (iPhone)
By default, the iPhone's Safari browser will contract the page to adapt to its screen. The following statement tells the iPhone Safari browser to use the device width as the viewport width and disable initial-scale.
<meta name="viewport" content="width=device-width; initial-scale=1.0">
 
Final Effect
View the final demo, adjust the browser size, and view the media query behavior. You can also use the iPhone, iPad, new BlackBerry, and Android to view the effects of the modile version.

 
Summary
　　
Reliable media queries Javascript
You can use css3-mediaqueries.js to solve the problem that browsers do 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 and rewrite the CSS layout based on the width of the viewport.
@media screen and (max-width: 560px) {    #content {        width: auto;        float: none;    }    #sidebar {        width: 100%;        float: none;    }}
 
　　
Elastic Images
Use max-width: 100% and Height: auto to make the image more elastic.
img {    max-width: 100%;    height: auto;    width: auto\9; /* ie8 */}
 
　　
Flexible embedded video
Using width: 100% and Height: auto can make embedded videos more flexible.
.video embed,.video object,.video iframe {    width: 100%;    height: auto;}
 
　　
WebKit font size adjustment
Use-WebKit-text-size-adjust: none to disable font size adjustment on the iPhone.
html {    -webkit-text-size-adjust: none;}
 
　　
Set iPhone viewport and initial scale
The following statement sets the viewport and in1_scale using the meta tag on the iPhone.
<meta name="viewport" content="width=device-width; initial-scale=1.0">
 
Now, the tutorial is complete.
 
Address: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
 
HTML5 practice series