CSS3 Media query for Responsive web design (for different mobile device widths)

Today's screen resolution, as small as 320px (IPhone), large to 2560px or even higher (large display), the range is great. In addition to the use of traditional desktops, users will increasingly be on mobile phones, netbooks, ipad-type tablet devices to browse the page. In this case, the fixed width of the design will appear more unreasonable. The page needs to be more adaptable, and its layout structure should be adjusted to respond to different devices and screen resolutions. Next, we'll look at how to implement a cross-device, cross-browser responsive web design with HTML5 and CSS3 media Queries (media query)-related technologies

Sample Effect Preview

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

Overview

We set the parent container width of the example page to a fixed 980px, which is suitable for any resolution wider than 1024 pixels for the desktop browsing environment. We monitor the resolution of devices with a width of less than 980px through media query and change the width of the page from "fixed" to "liquid", and the width of the layout element is adjusted as the size of the browser window changes. When the width of the visible part is further reduced to less than 650px, the container width of the main content section increases to full screen, and 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 HTML5 tags to implement these constructs more semantically, including the header, main content section, sidebar, and footer:

<div id= "Pagewrap" >

Html5.js

IE is an eternal topic, and for the HTML5 tag we use, the previous version of IE9 does not provide support. The best solution is still to help these older versions of IE browser create HTML5 element nodes through Html5.js. Call the JS file in our page's 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 browser compatibility issues. Although we can already create HTML5 element nodes in the lower version of IE, we still need to do some work on styling, declaring these "new" elements as Block-level:

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

Main structure of CSS

Ignoring the details, we are still concentrating on the big issues. As mentioned in the previous "Overview", by default the page container has a fixed width of 980 pixels, a fixed height of the header section (header) of 160 pixels, a width of 600 pixels for the main content section, a left float, and a sidebar (sidebar) that floats right, 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;

Demo as of current effect

At the moment, we are only beginning to complete the HTML and default structure of the page structure, of course, does not include those related to the topic of the implementation of the details. As you can see in the current presentation, the page cannot change layout as the browser size changes because no media query work has been done.

CSS3 Media Query

At last, I started to say the right thing. First we need to call the Css3-mediaqueries.js file in the page to help IE8 or the previous version support CSS3 media queries:

<!--[if Lt IE 9]> <script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/ Css3-mediaqueries.js "></script>

Next, we'll create a CSS style sheet and call it in the page:

When the browser's viewable portion width is greater than 650px less than 980px (liquid layout)

Set the width of the pagewrap to 95%

Set the width of content to 60%

Set the width of the sidebar to 30%

@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; }

When the browser's viewable part width is less than 650px (single-column layout)

Sets the height of the header to auto

Position the Searchform absolutely in the top 5px

Set the positioning of Main-nav, Site-logo, site-description to static

Sets the width of the content to auto (the width of the main content section expands to fullscreen), and the float setting is canceled

Set the width of the sidebar to 100% and cancel the float setting

@media screen and (Max-wi dth: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; } }

When the browser's visible part width is less than 480px

480px is the width of the iphone's horizontal screen. When the width of the visible part is less than this value, we need to make the following adjustments:

Disables automatic resizing of the HTML node's font size. By default, the iphone will enlarge the font size too small, and we can adjust it with the-webkit-text-size-adjust property.

Set the font size in Main-nav 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

We need to set max-width:100% and Height:auto for the images to make them elastic. For IE, a little extra work is still needed:

img { max-width:100%; Height:auto; width:auto\9; /* IE8 */

Elastic inline Video

Similarly, for video, we also need to do max-width:100% settings, but Safari's support for embed is not very strong, so we take the width:100% instead:

. Video embed, . Video object, . Video iframe { width:100%; Height:auto; }

Initial Zoom in iphone

By default, the Safari browser in the iphone automatically scales the page to fit the screen size. We can use the following meta settings to set the default width of the device as the viewable portion of the page in Safari and disallow the initialization of the zoom.

<meta name= "viewport" content= "width=device-width; initial-scale=1.0 ">

Final Effect Demo

The final demonstration of this example is just as we saw at the beginning of this article, and in addition remember to use a variety of typical mobile devices (IPhone, IPad, Android, BlackBerry, etc.) to verify the mobile version of the page, if conditions permit.

Summary of Points

Media Query JavaScript

For browsers that don't yet support media query, we'll call css3-mediaqueries.js in the page

<!--[if Lt IE 9]> <script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/ Css3-mediaqueries.js "></script>

CSS Media Queries

One of the keys to implementing an adaptive page design is to use CSS to adjust the page layout structure based on the change in resolution width.

@media screen and (max-width:560px) { #content { width:auto; Float:none; } #sidebar { width:100%; Float:none; }

Elastic picture

The elasticity of the picture is achieved through max-width:100% and Height:auto.

img { max-width:100%; Height:auto; width:auto\9; /* IE8 */

Elastic inline Elements (video)

width:100% and Height:auto enable the elasticity of inline elements.

. Video embed, . Video object, . Video iframe { width:100%; Height:auto;

Problems with font size automatic adjustment

Disable the font size auto-adjust for safari in iphone via-webkit-text-size-adjust:none

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

Problem with page width scaling