How do I design the response layout? CSS3 Media Query to implement a response layout

Article Introduction: response layout of the small things on so many, if you have a good supplementary or different views, you can contact me, we explore this small matter ...

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).

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?

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 will be a demand for solutions, hehe, when it comes to response layout, you have to mention media query in CSS3 (media inquiries), 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 and 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 that min and Max are used to express "greater than or equal to" and "small and or equal to". 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 (portraitlanscape) 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.

The resolution of the device is resolution.

3. Grammatical structure and usage

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

Example one: Using @media in Link:

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 (with a maximum visible width of 989px); A handheld device that is wide in 480px and below; a handheld device that is positioned at 480px and horizontally (i.e. 480 dimensions parallel to the ground) The screen is larger than or equal to 480px less than 1024px and the CSS style is positioned vertically.

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, the logical key word:

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 the results of the Web site under different sizes of 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 a few more sizes of monitoring cascading style sheet, this way 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 * *

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: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 Viewport This property is a declaration that sets the original size display and whether it is scaled on a mobile device.

Parameter settings:

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

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