A brief talk on HTML5 response-type layout

One, what is the response layout?

The responsive layout is a concept that Ethan Marcotte in May 2010, in short, that a Web site can be compatible with multiple terminals-not a specific version for each terminal.

This concept was created to address mobile internet browsing. The responsive layout can provide users with a more comfortable interface and a better user experience for different terminals, and with the current popularity of large screen mobile devices, it is not too much to describe by the general trend.

As more and more designers adopt this technology, we not only see a lot of innovation, but also see some forming patterns.

Second, what are the advantages and disadvantages of the response layout?

Advantages:

High flexibility in the face of different resolution devices
Able to quickly solve multiple equipment display adaptation problems
Disadvantages:

Compatible with a wide range of equipment workload, low efficiency
Code cumbersome, there will be hidden useless elements, loading time lengthened
In fact, this is a compromise of the design of the solution, many factors affect the best results not achieved
To some extent, change the original layout structure of the site, there will be user confusion

Third, the response layout how to design?

1. How to solve the compatibility problem between different equipments?

Media query in CSS3 can solve this problem.

2. What are the values that media query can get?

Wide and high device-width,device-heigth display screens/tactile devices.

The width and height of the render window width,heigth display screen/tactile devices.

The handheld direction of the device, horizontal or vertical orientation (portrait|lanscape) and printer.

Screen proportions aspect-ratio dot matrix printer.

The proportion of equipment device-aspect-ratio-dot matrix printer.

The object color or color list color,color-index the display screen.

Resolution resolution of the device

3. Grammatical structure and usage

Syntax: @media device name only (selection criteria) not (selection criteria) and (device selection criteria), device two {srules}

Usage:

A, example one: Using @media in Link:

<link rel= "stylesheet" type= "Text/css" media= "only screens and (max-width:480px), only the screen and (max-device-width:48 0px) "href=" Link.css "rel=" external nofollow "/>

The above use only can be omitted, limited to computer monitors, the first condition max-width refers to the maximum width of the rendering interface, the second condition max-device-width refers to the maximum width of the equipment.

b, inline @media in the style sheet:

The

code is as follows:


@media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width : 480px)


and (Orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) { Srules}

Set the computer monitor resolution (width) is greater than or equal to 1024px (and the maximum visible width is 989px), the screen width in 480px and the following handheld devices, screen width in 480px and horizontal (that is, 480 dimensions parallel to the ground) of the handheld device;

A CSS style that is wide or equal to 480px less than 1024px and vertically placed.

Implementation of responsive layout

The

code is as follows:


&lt;! DOCTYPE html&gt;


&lt;html lang= "en" &gt;


&lt;head&gt;


&lt;meta charset= "UTF-8" &gt;


&lt;!--must add this sentence

Width of
width–viewport

The height of the
height–viewport


initial-scale– The initial scaling ratio


minimum-scale– allows the user to zoom to the minimum ratio


maximum-scale– allows the user to zoom to the maximum proportion


user-scalable– Whether the user can scale manually


--&gt;


&lt;meta name= "viewport" content= "Width=device-width, initial-scale=1.0" &gt;


&lt;!--Finally, if you don't support media query in IE, we can use media query JavaScript to solve the problem,


only need to quote css3-mediaqueries.js on the page header--&gt;


&lt;script src= "&lt;a href=" Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js "&gt; &lt;/script "&gt;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" &gt;&lt;/script&lt;/ A&gt;&gt;


&lt;title&gt;Document&lt;/title&gt;


&lt;style&gt;


/**


design idea is very simple, first define the fixed width under the standard browser (if the standard browser resolution is 1024PX, then we set width to 980px),


then uses media query to monitor browser size changes, and when the browser's resolution is less than 1024PX,


sets the width of the page to a percentage by the style sheet preset by media query,


the structural elements of such a page will be adjusted according to the size of the browser.


Similarly, when the viewable area of the browser changes to a value (if 650px),

The structure elements of the
page are adjusted according to the cascading style sheet preset by media query. Take a look at our example:


**/


/* When the viewable area of the browser is less than 980px */


@media screen and (max-width:980px) {


#wrap {width:90%; margin:0 auto;}


#content {width:60%;p adding:5%;}


#sidebar {width:30%}


#footer {padding:8% 5%;margin-bottom:10px;}


}


/* When the viewable area of the browser is less than 650px */


@media screen and (max-width:650px) {


#header {Height:auto}


#searchform {position:absolute;top:5px;right:0}


#content {width:auto; float:none; margin:20px 0;}


#sidebar {width:100%; float:none; margin:0;}


}


/** in order to better display the effect, we often also want to format some of the CSS properties of the initial value: ***/


/* Disable Safari's font size auto-adjustment in the iphone * *


HTML {


-webkit-text-size-adjust:none;


}


/* Set HTML5 element as block * *


article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section {


Display:block;


}


/* Set Picture video and other adaptive adjustment * *


img {


max-width:100%;


Height:auto;


Width:auto9; /* IE8 * *


}


. Video embed,. Video object,. Video iframe {


width:100%;


Height:auto;


}


&lt;/style&gt;


&lt;/head&gt;


&lt;body&gt;


&lt;/body&gt;


&lt;/html&gt;