Implement responsive design using css3 media queries

Source: http://bbs.html5cn.org/forum.php? MoD = viewthread & tid = 11516 & extra =

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 introduce how to use HTML5 and css3.
Media queries implements a responsive design across browsers.

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 view 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 ".

1. <Div id = "pagewrap">
3. <Header id = "Header">
5. <Hgroup>
6. <H1 id = "Site-logo"> demo
7. <H2 id = "Site-description"> site description </H2>
8. </Hgroup>
10. <Nav>
11. <Ul id = "Main-nav">
12. <Li> <a href = "#"> Home </a> </LI>
13. </Ul>
14. </Nav>
16. <Form ID = "searchform">
17. <Input type = "Search">
18. </Form>
20. </Header>
22. <Div id = "content">
24. <Article class = "Post">
25. Blog Post
26. </Article>
28. </Div>
30. <Aside id = "sidebar">
32. <Section class = "widget">
33. Widget
34. </Section>
36. </Aside>
38. <Footer id = "footer">
39. Footer
40. </Footer>
42. </Div>

Copy code

Html5.js

Note that I used HTML5 labels in the demo. However, ie9 does not support new HTML5 labels such as The html5.js file will solve this problem.

1. <! -- [If lt ie 9]>
2. <SCRIPT src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </SCRIPT>
3. <! [Endif] -->

Copy code

CSS
　　Set HTML5 elements to block elements

The following CSS sets the HTML5 elements (article, aside, figure, header, footer, etc.) as block elements.

1. Article, aside, details, figcaption, figure, footer, header, hgroup, menu, NAV, section {
   
2. Display: block;
3. }

Copy code

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.

1. # Pagewrap {
2. Width: 980px;
3. Margin: 0 auto;
4. }
6. # Header {
7. Height: 160px;
8. }
10. # Content {
11. Width: 600px;
12. Float: left;
13. }
15. # Sidebar {
16. Width: 280px;
17. Float: right;
18. }
20. # Footer {
21. Clear: both;
22. }

Copy code

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.

1. <! -- [If lt ie 9]>
2. <SCRIPT src = "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </SCRIPT>
3. <! [Endif] -->

Copy code

Contains media queries CSS

Create the CSS required for media query and add references to the page.

1. <Link href = "media-queries.css" rel = "stylesheet" type = "text/CSS">

Copy code

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.

1. @ Media screen and (max-width: 980px ){
3. # Pagewrap {
4. Width: 95%;
5. }
7. # Content {
8. Width: 60%;
9. Padding: 3% 4%;
10. }
12. # Sidebar {
13. Width: 30%;
14. }
15. # Sidebar. widget {
16. Padding: 8% 7%;
17. Margin-bottom: 10px;
18. }
20. }

Copy code

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

1. @ Media screen and (max-width: pixel px ){
3. # Header {
4. Height: auto;
5. }
7. # Searchform {
8. Position: absolute;
9. Top: 5px;
10. Right: 0;
11. }
13. # Main-nav {
14. Position: static;
15. }
17. # Site-logo {
18. Margin: 15px 100px 5px 0;
19. Position: static;
20. }
22. # Site-description {
23. Margin: 0 0 15px;
24. Position: static;
25. }
27. # Content {
28. Width: auto;
29. Float: none;
30. Margin: 20px 0;
31. }
33. # Sidebar {
34. Width: 100%;
35. Float: none;
36. Margin: 0;
37. }
39. }

Copy code

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%

1. @ Media screen and (max-width: 480px ){
3. HTML {
4. -WebKit-text-size-adjust: none;
5. }
7. # Main-nav {
8. Font-size: 90%;
9. Padding: 10px 8px;
10. }
12. }

Copy code

Elastic Images

To make the image size more elastic, you can simply add max-width: 100% and Height: auto. This method works normally in IE7 and cannot work in IE8. You need to use width: auto \ 9 to solve this problem.

1. IMG {
2. Max-width: 100%;
3. Height: auto;
4. Width: auto \ 9;/* IE8 */
5. }

Copy code

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%.

1. . Video embed,
2. . Video object,
3. . Video IFRAME {
4. Width: 100%;
5. Height: auto;
6. }

Copy code

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.

1. <Meta name = "viewport" content = "width = device-width; initial-scale = 1.0">

Copy code

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.

1. <! -- [If lt ie 9]>
2. <SCRIPT src = "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </SCRIPT>
3. <! [Endif] -->

Copy code

CSS media queries

This technique allows you to create an adaptive design and rewrite the CSS layout based on the width of the viewport.

1. @ Media screen and (max-width: 560px ){
3. # Content {
4. Width: auto;
5. Float: none;
6. }
8. # Sidebar {
9. Width: 100%;
10. Float: none;
11. }
13. }

Copy code

Elastic Images

Use max-width: 100% and Height: auto to make the image more elastic.

1. IMG {
2. Max-width: 100%;
3. Height: auto;
4. Width: auto \ 9;/* IE8 */
5. }

Copy code

Flexible embedded video

Using width: 100% and Height: auto can make embedded videos more flexible.

1. . Video embed,
2. . Video object,
3. . Video IFRAME {
4. Width: 100%;
5. Height: auto;
6. }

Copy code

WebKit font size adjustment

Use-WebKit-text-size-adjust: none to disable font size adjustment on the iPhone.

1. HTML {
2. -WebKit-text-size-adjust: none;
3. }

Copy code

Set iPhone viewport and initial scale

The following statement sets the viewport and in1_scale using the meta tag on the iPhone.

1. <Meta name = "viewport" content = "width = device-width; initial-scale = 1.0">

Copy code

Now, the tutorial is complete.