HTML5-Responsive layout

First, what is the responsive layout?

Responsive Layout is a concept presented by Ethan Marcotte in May 2010, in short, that a website can be compatible with multiple terminals-rather than making a specific version for each terminal.

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

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

Ii. what are the advantages and disadvantages of the responsive layout? Advantages:

1. High flexibility in face of different resolution devices
2. Can quickly solve multi-device display adaptation problems

Disadvantages:

1. Compatible with a wide range of equipment, low efficiency and high workload
2. Code is cumbersome, there will be hidden useless elements, loading time extended
3. In fact, this is a compromise of the design of the solution, many factors affect the best results
4. To a certain extent, change the original layout structure of the site, there will be user confusion situation

Thirdly, how to design the responsive layout?

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

CSS3 Media Query (media query) can solve this problem.

2. What values can media query get?

Device width and Height device-width,device-heigth display screen/tactile device.

The width and height of the render window width,heigth display screen/haptic device.

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

Screen ratio aspect-ratio dot matrix printer.

Device ratio device-aspect-ratio-dot matrix printer.

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

Resolution of the device resolution

3. Grammatical structure and usage

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

Usage:

A, example one: Use @media in Link:

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

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

b, inline @media in the style sheet:

@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) greater than or equal to 1024px (and the maximum visible width of 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) placed handheld devices;

The screen is large or equal to 480px less than 1024px and vertically placed on the device's CSS style.

Iv. implementing responsive layouts

<! DOCTYPE html>

<meta charset= "UTF-8" >
<!--must add this sentence
Width of the Width–viewport
The height of the Height–viewport
initial-scale– Initial zoom ratio
minimum-scale– allows the user to zoom to the minimum scale
maximum-scale– allows the user to zoom to the maximum scale
user-scalable– whether the user can manually scale
-
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >
<!--Finally, for cases where media query is not supported in IE, we can use media query JavaScript to solve
Just refer to Css3-mediaqueries.js on the page header--
<script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script>
<title>Document</title>
<style>
/**

The design idea is very simple, first defines the fixed width under the standard browser (if the standard browser resolution is 1024PX, then we set the width to 980px),
Then use media query to monitor the browser's size changes, when the browser's resolution is less than 1024px,
The width of the page is set to a percentage display by using the style sheet preset by media query.
In this way, the structure elements of the page will be adjusted according to the size of the browser.
Similarly, when the viewable area of the browser changes to a value (if it is 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;}
}
/** for a better display, we tend to format some of the initial values of CSS properties: ***/

/ * Disable the font size auto-adjust for safari in iphone * /
HTML {
-webkit-text-size-adjust:none;
}
/ * Set HTML5 element to block * /
article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section {
Display:block;
}
/ * Set up adaptive adjustments for picture videos * /
img {
max-width:100%;
Height:auto;
width:auto\9;/* IE8 * /
}
. Video embed,. Video object,. Video iframe {
width:100%;
Height:auto;
}
</style>

<body>

</body>

HTML5-Responsive layout