Response layout What are the advantages and disadvantages of this trivial matter?

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Talk about the response layout, I believe we all have some understanding, responsive layout is a popular design concept this year, with the popularity of mobile internet, in order to solve today's various browser resolution and the display of different mobile devices, designers proposed a response layout design. Let's talk about response layout This little thing today, including what is the response layout, the pros and cons of the response layout, and how the response layout is designed (the response layout is implemented via CSS3 Media query).

What is a responsive 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

Shortcomings：

Compatible with a wide range of equipment workload, inefficient

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?

We learned what a responsive layout is, and how do we design it in our actual project? In the past when we design the site will be different browser compatibility problems, and now have to come to a different size equipment, how do we set it down? There is a need for solutions, hehe, when it comes to responsive layout , you have to mention media query in CSS3, which is a good thing, easy to use, powerful, fast ... Media Query is a powerful tool for making a responsive layout, and using the tools, we can easily and quickly create a variety of rich practical interface. The next step is to get a closer look at media Query.

1. What is media query in CSS?

Define style sheet rules with different media types and conditions. Media queries allow CSS to work more precisely on different media types and different conditions for the same media. Most media properties for media queries accept min and max for expression "greater than or equal to" and "small or equal." Such as: Width will have min-width and max-width media queries can be used in CSS @media and @import rules, can also be used in HTML and XML. With this tag attribute, we can easily achieve a rich interface under different devices, especially mobile devices, will be more widely used.

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.

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

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

The resolution of the device is denotes.

3. Grammatical structure and usage

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

Example: Using @media in Link:

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

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.

Example two: inline @media in a 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}

In example two, the computer monitor resolution (width) is set to be 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 transverse (that is, 480 dimensions parallel to the ground) placed handheld devices; A CSS style that is wide or equal to 480px less than 1024px and vertically placed.

As you can see from the example above, the word Fu is connected by a space, and the selection criteria are enclosed in parentheses, srules for a compatible style sheet, enclosed in brackets. Only (limit some device, can omit), and (logic and), not (excluding a device) for logical keywords, a variety of devices separated by commas, this inherits the CSS basic syntax.

4, the available device name parameters:

5. Logical Keywords:

6, the available device name parameters:

7. Test Media Queries

Finally, we need to test the media queries we just designed, to test the effect of media queries on different devices, and to use a browsing tool to verify the display on different sizes of screens, and here's a good online tool for you. Responsivator, it can simulate a variety of devices such as the iphone, and can also customize the display of different size screens, just enter a URL or even a local URL (such as: HTTP://127.0.0.1/), You can see how the site will look under different size screens.

8, through media queries implementation of response layout design

OK, so we know what media Query is, so we're going to use it in a design project with a responsive layout. The idea is simple, first define the fixed width in the standard browser (if the standard browser resolution is 1024PX, then we set width to 980px), and then use media query to monitor browser size changes, when the browser resolution is less than 1024px, You set the width of the page to a percentage by the style sheet preset by media query, and the structure elements of the page are 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;}

}

Through the above we can monitor the visual area of the browser change is the time our page structure elements will also correspond to changes, of course, you can set up a few more sizes of monitoring cascading style sheet, which can be based on different sizes of equipment to respond to the layout. For better display, we often have to format the initial values of some CSS properties:

/* Disable Safari Font size auto adjustment in iphone

HTML {

-webkit-text-size-adjust:none;

}

/* Set HTML5 element to block * *

Aspires, 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:auto\9; /* IE8 *

}

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

width:100%;

Height:auto;

}

The final note is to add the following sentence between the head of the page:

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

Meta Viewport This property is a declaration that sets the original size display and scaling on the mobile device.

Parameter settings:

Width–viewport width

The height of the Height–viewport

initial-scale– Initial Scaling

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

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

user-scalable– whether users can scale manually

Finally, if you don't support media query in IE browser, we can use media query JavaScript to solve it, just refer to Css3-mediaqueries.js in the page header. Example：

<! --[if LT IE 9]>

<script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" >

</script> <! [endif]-->

Well, the response to the layout of the trivial is so much, if you have good additional comments or different insights, you can contact me, we explore this small matter ...

Source: Jue Front