Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use media query for web responsive design". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to use media queries for web responsive design"!

First of all, look at an example.

Before you start, take a look at what the final demo looks like. Resize your browser and see how the page layout floats automatically based on the width of the viewport (browser visual area).

More examples

If you want to see more examples, take a look at the following WordPress templates I designed with media queries: Tisa,Elemin,Suco,iTheme2,Funki,Minblr and Wumblr.

Overview

For any resolution whose width is greater than 1024px, the width of the page container will be 980px. Media queries are used to check that if viewport is narrower than 980px, the page layout changes to a flow width instead of a fixed width. If viewport is narrower than 650px, the page layout will expand the content container and sidebar into the overall width, forming a single-column layout.

HTML code

I won't go into the details of the HTML code. The following is the overall structure of the page layout. I have a pagewrap container that wraps the header,content,sidebar,footer together.

Demo Site Description Home blog post widget footer

HTML5.js

Notice that I used the HTML5 tag in demo. IE browsers below 9 do not support new elements introduced in HTML5, such as, and so on. Including the html5.js Javscript file in the HTML document enables IE to recognize these new elements.

CSS

Reset the HTML5 element to a block element

The following CSS will reset the HTML element (article,aside,figure,header,footer, etc.) to the block element.

Article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

Main structure CSS

I'm still not going to go into details this time. The main container pagewrap is 980px wide. Header has a fixed 160px height. Container content is 600px wide and floats to the left. 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;}

Demo of * step

Here is the design demo. Note that the media query has not been implemented yet. Change the size of the browser window and you should see that the page layout is not scalable.

About CSS3 media inquiry

Now comes the interesting part-- media inquiries.

JavaScript file containing media query

CSS3 media queries are not supported in Internet Explorer8 or older versions. You can make it support media queries by adding the Javascript file css3-mediaqueries.js.

CSS file containing media query

Create a new style sheet for the media query. Take a look at my previous tutorials to figure out how media queries work.

Viewport is less than 980px (flow layout)

For viewport narrower than 980px, the following rules will be applied:

Pagewrap = reset width to 95%

Content = reset width to 60%

Sidebar = reset width to 30%

Tip: use a value of percentage (%) to make the container flow.

@ 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 is less than 650px (one column layout)

Next I have another CSS collection for viewport that is narrower than 650px:

Header = reset height to auto

Searchform = reposition searchform to 5px off the top

Main-nav = reset position to static

Site-logo = reset position to static

Site-description = reset position to static

Content = resets width to auto (this causes the container to expand to the overall width) and does not float

Sidebar = reset width to 100% and do not float

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: 00 15px; position: static;} # content {width: auto; float: none; margin: 20px 0;} # sidebar {width: 100%; float: none; margin: 0;}}

Viewport smaller than 480px

The following CSS will take effect when the width of the viewport is less than the width of the 480px (that is, the width of the iPhone screen in landscape mode).

Html = disables text resizing (text size adjustment). By default, iPhone enlarges the text size to make it more comfortable to read. You can disable text resizing by adding-webkit-text-size-adjust: none.

Main-nav = reset 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 picture

To make the picture elastic, you only need to add max-width:100% and height:auto. Adding to the picture that max-width:100% and height:auto work in IE7 but not in IE8 (yes, another strange IE bug). To solve this problem, you need to add width:auto\ 9 to IE8.

Img {max-width: 100%; height: auto; width: auto\ 9; / * ie8 * /}

Flexible embedded video

In order to make the embedded video elastic, you can use the same techniques mentioned above. (embedded element's) max-width:100% does not work in Safari for unknown reasons. The solution is to use width:100% as an alternative.

.video embed, .video object, .video iframe {width: 100%; height: auto;}

Meta tag for initial scaling (iPhone)

By default, Safari in iPhone shrinks the HTML page to fit the iPhone screen. The following meta tag tells Safari in iPhone to use the width of the device as the width of the viewport and disables the initial scaling.

Final Demo

Check the final demo and resize your browser window to see the media queries that are actually working. Don't forget to use the iPhone,iPad,Blackberry (new version) and Android phones to access demo to see what the mobile version looks like.

Summary

Javascript spare for media inquiry:

Css3-mediaqueries.js is necessary to enable browsers that do not support media queries to use media queries.

CSS Media Enquiry:

The way to create an adaptive design is to rewrite the page layout structure with 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 pictures:

Use max-width:100% and height:auto to make the picture elastic.

Img {max-width: 100%; height: auto; width: auto\ 9; / * ie8 * /}

Elastic embedded video:

Use width:100% and height:auto to make embedded video resilient.

.video embed, .video object, .video iframe {width: 100%; height: auto;}

Webkit font resizing (Text Size Adjust):

Use-webkit-text-size-adjust:none on iPhone to disable text resizing.

Html {- webkit-text-size-adjust: none;}

Reset the Viewport and initial scale of the iPhone:

The following meta tag resets the viewport and initial scale on iPhone:

At this point, I believe you have a deeper understanding of "how to use media queries for web responsive design". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.