HTML5 and CSS3 Media Queries responsive Web Design Scheme

Webjx: responsive Web design through CSS3 Media Query.

 

More than half of the 11th holiday has passed. Today it's really not clear. looking out the window, you can see the sun shining through the cool air. Since I was no longer a student, I have always cherished several long holidays every year and tried to make every day as full as possible. Close your eyes at night, our brains are full of Drupal, blog, coffee, Call of Duty, and South Park... You may have to leave.

OK. In the previous article, we learned the concepts, components, and basic implementation ideas of responsive Web design. We will continue with the related topics today. We will start from the "elastic layout structure" introduced previously, and learn more through a specific example.

Today's screen resolution is as small as 320px (iPhone), as large as 2560px or even higher (large display), and the change range is extremely large. In addition to traditional desktops, more and more users will browse the pages through tablet devices such as mobile phones, netbooks, and iPad. In this case, the fixed-width design scheme will become increasingly unreasonable. The page must have better adaptability, and its layout structure should be adjusted according to different devices and screen resolutions. Next, we will learn how to implement a responsive Web design scheme across devices and browsers through HTML5 and CSS3 Media Queries (Media query) technologies.

Sample effect Preview

First, let's take a look at the final effect demonstration of this example. Open the page, drag and drop the browser border, gradually narrow down the window, and observe how the Page Structure and element layout are automatically adjusted based on the width change.

More examples

I (author of the original article) designed some WordPress Templates using media query, such as Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr.

Overview

We set the parent container width of the sample page to a fixed 980px. for desktop browsing environments, this width applies to any resolution with a width of 1024 pixels. We use media query to monitor the resolutions of devices whose width is less than 980px, and change the width of the page from "fixed" to "liquid ", the layout element width varies with the size of the browser window. When the width of the visible part is further reduced to below pixel PX, the container width of the main content part will be increased to full screen, and the sidebar will be placed below the main content part, and the entire page will be changed to the layout.

HTML code

We will focus on the main layout of the page and use HTML5 labels to implement these structures in a more semantic manner, including the page header, main content section, sidebar, and footer:

<Div id = "pagewrap">
<Header id = "header">
<Hgroup>
<H1 id = "site-logo"> Demo <H2 id = "site-description"> Site Description </Hgroup>
<Nav>
<Ul id = "main-nav">
<Li> <a href = "#"> Home </a> </li>
</Ul>
</Nav>
<Form id = "searchform">
<Input type = "search">
</Form>
</Header>
<Div id = "content">
<Article class = "post"> blog post </article>
</Div>
<Aside id = "sidebar">
<Section class = "widget"> widget </section>
</Aside>
<Footer id = "footer"> footer </footer>
</Div>

HTML5.js

IE is an eternal topic. For HTML5 labels we use, versions earlier than IE9 cannot provide support. Currently, the best solution is to use html5.js to help these earlier ie browsers create HTML5 element nodes. Call the JS file in the HTML code of our page:

<! -- [If lt IE 9]>
<Script src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<! [Endif] -->

CSS

HTML5 block-level element styles

The first problem is browser compatibility. Although we can already create HTML5 element nodes in earlier versions of IE, we still need to do some work in style, declare these "new" elements as block-level:

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

CSS of the Main Structure

Ignoring details, we are still focusing on big issues. As mentioned above, the fixed width of the page container is 980 pixels by default, and the fixed height of the page header is 160 pixels; the width of the main content is 600 pixels, float left, and right of the sidebar (sidebar). The width is 280 pixels.

# Pagewrap {
Width: 980px;
Margin: 0 auto;
}

# Header {
Height: 160px;
}

# Content {
Width: 600px;
Float: left;
}

# Sidebar {
Width: 280px;
Float: right;
}

# Footer {
Clear: both;
}

Effect demonstration up to now

At present, we have initially completed the HTML and default structure styles of the page structure. Of course, it does not include implementation issues that are irrelevant to the topic. As we can see in the current demonstration, because there is no media query work, the page layout cannot change with the size of the browser.

Http://www.jscode.cn/tag/HTML5/6