CSS3 Media Query implements responsive Web design (for different mobile device widths)

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, let's take a look at how to implement a responsive Web design scheme across devices and browsers using 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.

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">

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 on style and 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.

CSS3 Media Query

At last, I started to talk about things. First we need to call the css3-mediaqueries.js file on the page to help IE8 or earlier versions support CSS3 media queries:

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

Next, we will create a CSS style sheet and call it on the page:

<link href="media-queries.css" rel="stylesheet" type="text/css">

When the width of the visible part of the browser is greater than or less than 980px (liquid layout)

Set pagewrap to 95%

Set the content width 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 width of the visible part of the browser is smaller than pixel PX)

Set the header height to auto

Position searchform in the top 5px position

Set the positioning of main-nav, site-logo, and site-description to static.

Set the content width to auto (the width of the main content part will be extended to full screen) and cancel the float setting.

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

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

When the width of the visible part of the browser is less than PX

The 480px is the width of the iPhone horizontal screen. When the width of the visible part is smaller than this value, we need to make the following adjustments:

Disable Automatic font size adjustment for html nodes. By default, the iPhone will enlarge the font size too small. We can adjust it through the-webkit-text-size-adjust attribute.

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 Images

We need to set max-width: 100% and height: auto for the image to make it flexible. For IE, a little extra work is required:

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

Auto embedded video

Similarly, for videos, we also need to set max-width: 100%. However, Safari does not provide great support for this attribute of embed, so we use width: 100% instead:

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

Initial scaling 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 width of the visible part of the page in Safari, and disable initialization scaling.

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

Final effect demonstration

The final demonstration of this example is as we saw at the beginning of this article. Remember to use a variety of typical mobile devices (iPhone, iPad, Android, Blackberry, etc.) as allowed) to verify the mobile version of the page.

Summary

Media Query JavaScript

For browsers that do not yet support media query, we need to call the css3-mediaqueries.js on the page

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

CSS Media Queries

One of the keys to implementing Adaptive Page design is to adjust the page layout structure based on the resolution width.

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

Elastic Images

Max-width: 100% and height: auto are used to make the image flexible.

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

Flexible embedded elements (video)

Using width: 100% and height: auto, the nested elements are elastically modified.

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

Automatic font size adjustment

Use-webkit-text-size-adjust: none to disable automatic font adjustment of Safari in iPhone

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

Page width Scaling

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