HTML5 and CSS3 Media queries responsive web design

Article Introduction: implement responsive web design with CSS3 Media query.

The 11 long vacation has already passed half. It's really sunny today, looking out of the window, you can almost see the sun shining through the cool air. Since no longer a student, the number of holidays on a few a year to cherish the incomparable, trying to make every day as far as possible to the full of some; Close your eyes at night, your mind is all about Drupal, blog, coffee, Call of Duty, South Park ... Maybe you need to go out for a walk.

OK, start talking serious. In the previous translation, we learned about the concept of responsive web design, its constituent elements, and the basic implementation ideas. Today, we will continue to discuss the topic, from the "flexible layout structure" described in the previous section, this article is based on a specific example to further study.

Today's screen resolution, Small to 320px (IPhone), large to 2560px or even higher (large display), a wide range of changes. In addition to using traditional desktops, users will increasingly browse the page with mobile phones, netbooks and ipad-type tablet devices. In this case, the fixed-width design will become increasingly unreasonable. The page needs to be more adaptable, and its layout structure should be adjusted according to different equipment and screen resolution. Next, we'll look at how to implement cross browser response web design across devices through HTML5 and CSS3 media Queries (media query)-related technologies.

Sample Effects Preview

First, let's take a look at the final demo of this example. Open the page, drag the browser border, slowly shrink the window, and observe how the page structure and element layout automatically respond to adjustments based on width changes.

More examples

I used media query to design some wordpress templates, such as Tisa, Elemin, Suco, ITheme2, Funki, Minblr, and Wumblr.

Overview

We set the parent container width of the example page to a fixed 980px, which applies to any resolution wider than 1024 pixels for the desktop browsing environment. We monitor the resolution of devices that are less than 980px wide by media query and change the width of the page from "fixed" to "liquid", and the width of the layout element adjusts to the size of the browser window. When the width of the visible portion is further reduced below 650px, the container width of the main content section increases to full screen, while the sidebar is placed below the main content section and the entire page becomes a single column layout.

HTML code

We will focus on the main layout of the page and use the HTML5 tag to implement these structures more semantically, including the header, the main content section, the sidebar, and the footer:

 <div id="pagewrap">
<nav>
<ul id="main-nav">
<li><a href="#">Home</a></li>
</ul>
</nav>
<form id="searchform">
<input type="search">
</form>
<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 the HTML5 tag we use, the IE9 version is not available for support. The best solution is still to help these older versions of IE browsers create HTML5 element nodes through Html5.js. Call the JS file in our page HTML code:

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

Css

HTML5 block-level element style

The first is still a browser compatibility issue. Although we can already create HTML5 element nodes in a lower version of IE, we still need to do some styling work to declare these "new" elements as block levels:

Article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section {     display:block;}

The main structure of the CSS

Ignoring the details, we still focus on the big issues. As mentioned in the previous overview, the page container has a fixed width of 980 pixels By default, a fixed height of 160 pixels in the header section (header), a 600 pixel width for the main content section (content), a left float, and a sidebar (sidebar) Right float, 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;
}

As of the present effect demo

At the moment we are only beginning to complete the HTML and default structure style of the page structure, and of course, do not include the issues unrelated to the topic implementation. As you can see in the current demo, because you haven't done anything with media query, the page doesn't change the layout as the size of the browser changes.