CSS3 Media query for Responsive web design (width for different mobile devices)

The screen resolution now. Small to 320px (IPhone), big to 2560px or even higher (large display). vary greatly in scope. In addition to using traditional desktops. Users will be more and more through the mobile phone, netbook, ipad-type tablet device to browse the page.

In this case, the fixed width of the design will appear to be increasingly unreasonable. The page needs to have a better adaptability, its layout structure should be based on different devices and screen resolution to respond to adjust. 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 results of this example. Open the page, drag the browser border, slowly reduce the form, at the same time to observe how the structure of the page and the layout of the element is based on the change of the width of the active response adjustment.

Overview

We set the parent container width of the example page to a fixed 980px, and for the desktop browsing environment, the width is applied regardless of what resolution is wider than 1024 pixels. We monitor the resolution of devices with a width 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 form changes. When the width of the visible part is further reduced to below 650px. The container width of the main content section increases to full screen. The sidebar will be placed below the main content section. 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 the eternal topic. For the HTML5 label we use. Support is not available for version number prior to IE9. The best solution for the moment is still to create HTML5 element nodes through Html5.js to help these older versions of IE browser. 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 have been able to create HTML5 element nodes in the low 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," the page container has a fixed width of 980 pixels by default. The header section has a fixed height of 160 pixels, and the main content section is 600 pixels wide. Left float. The sidebar (sidebar) floats right, with a width of 280 pixels.

#pagewrap { width:980px; margin:0 auto; } #header { height:160px; } #content { width:600px; Float:left; } #sidebar { width:280px; float:right; } #footer { clear:both;

Results as of now demo

Right now, we're just beginning to finish. The HTML and default structure style of the page structure, of course, does not include those details that are irrelevant to the topic.

As can be seen in the present presentation, because no matter what media query work has not been done. The page also cannot change the layout as the browser size changes.

CSS3 Media Query

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

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

Next. We're going to 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 cancel the float setting

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 the value. We need to make the following adjustments:

Disables the font size of the HTML node and adjusts itself actively. 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, you still need a little extra work:

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

Elastic inline Video

The same. For video. We also need to make max-width:100% settings. But Safari's support for embed's property is not very good, so we replace it with width:100%:

. 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 are able to 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 ">

Finally effect demo

The example is finally shown as we saw at the beginning of this article, and remember to use a variety of typical mobile devices (IPhone, IPad, Android, BlackBerry, and so on) to verify the mobile version number of the page, with conditional consent.

Summary of Points

Media Query JavaScript

For browsers that do not yet support media query. We're going to 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 key 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;

Font size self-tuning problem

Disable the size of safari in iphone by-webkit-text-size-adjust:none self-tuning

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

Problem with page width scaling

Copyright notice: This article blog original article. Blogs, without consent, may not be reproduced.

CSS3 Media query for Responsive web design (width for different mobile devices)