Responsive design------Responsive designs

What is responsive design? Wikipedia is a description of the response: "The responsive design is simply called RWD, which is a design method that provides a wide range of devices to browse the Web, and RWD allows your Web pages to show different design styles on different devices. From this point of description, RWD is not a fluid layout, nor a grid layout, but rather a unique approach to web design.

Responsive design in order to consider the layout of elements, but also need to be "responsive", it needs to meet the following three conditions: the site must establish a flexible grid foundation; The images referenced to the site must be scalable; different display styles need to be in media Write different styles on the queries.

To use responsive flexibly, only to meet these conditions is not enough, we must have a comprehensive understanding of responsive, so to understand responsive, we have to understand some of his terminology:

1. Fluid grids

The fluid grid is a simple grid system that references the grid system in the fluid design and uses a percentage unit to control the grid size for each grid lattice. The biggest benefit of this grid system is that your grid size is scaled proportionally to the size of your screen at any time.

2. Elastic image

Elastic image refers to the image is not set to the fixed size, but according to the fluid grid to scale, to adapt to the size of various meshes. And the implementation method is relatively simple, a code can be done with things.

img {max-width:100%;}

Unfortunately, this code in the IE8 browser has a serious problem that makes your picture disappear. Of course, the elastic image in the responsive design how to achieve better, so far there is still controversy, but also in the continuous improvement.

For each breakpoint to provide a different picture, this is a headache thing, because media queries can not change the image "src" attribute value, that do not have a division method to solve it? Please refer to the following workaround. Use background-image to use a background picture for an element, Show/Hide the parent element, use a different picture for the parent element, and then control the display or hiding of these pictures through media queries.

Take a look at a breakpoint to solve the image adaptive example.

The corresponding CSS code:

@media (min-device-width:600px) {img[data-src-600px]{  content:attr (Data-src-600px,url);  }} @media (min-device-width:800px) {  img[data-src-800px] {  content:attr (data-src-800px,url);  }}

Note: This is only a way to solve the adaptive image of responsive images, but this scheme only adapts to a few breakpoints. Not very practical, here only to expand the students ' ideas. 3. Media Enquiry

Media queries have been strongly expanded in CSS3. Using this property allows your design to fit the corresponding style according to the user terminal. This is also the most critical in responsive design. It can be said that responsive design left the medial queries lost the meaning of his survival. Simply put, the media query can be based on the size of the device to find a suitable style. Responsive design is most concerned: depending on the user's current width of the device, your Web page will load an alternate style to achieve a specific page style.

4. Screen resolution

Screen resolution Simple point is the resolution of the user monitor, in a deep point of view, the screen is the user's device to browse your Web page when the resolution of the display screen, such as the smartphone browser, mobile Computer browser, tablet browser and desktop browser resolution. The responsive design uses the Media queries property to adapt the corresponding CSS style to the resolution used by the browser. So screen resolution is a very important thing in responsive design, because you can call the corresponding style only if you know what resolution the Web page is going to display.

5. Main breakpoint

The main breakpoint, a new word in web development, is a very important part of the responsive design. The simple description is the critical point of the device's width. In media queries, the attribute values for the media attribute "Min-width" and "Max-width" are the breakpoint values in the responsive design. Simply put, the criteria for creating a media query is to use the primary and secondary breakpoints. Each breakpoint will call a style file (or style code), as shown in:

The Style.css style file is used in Web pages, but this style file includes all styles of style code, which means that the styles displayed under all devices are downloaded through this style file. Of course, in practice, you can also use another method, which is to load different style files at different breakpoints, as shown in.

The main points are the main breakpoints, and the different style files loaded by the main breakpoint directly affect the effect of the web. In addition to the main breakpoints, you can add a minor breakpoint on this basis to accommodate more effects. However, when the primary and secondary breakpoints increase, the style that needs to be maintained increases correspondingly, and the cost is correspondingly increased. Therefore, in the actual use, according to their own product requirements, determine the breakpoint.

Combined, set breakpoints should be three points: to meet the main breakpoint; add some other breakpoints if possible; set a desktop breakpoint above 1024.

Responsive layout Tipsthrough the above introduction, we have a certain understanding of the responsive design, but in the actual production still have some layout skills:

In the responsive layout, you can discard without reservation:

First, as little as possible with insignificant div;

Second, do not use inline elements (inline);

Third, try to use less JS or flash;

Finally, discard the useless absolute positioning and floating style;

Five, discard any redundant structures and do not use the 100% setting.

Have to have, discard some of the responsive have influence of East, then what can help responsive to determine a better layout ?

First, the use of HTML5 DOCTYPE and related guidelines;

Second, reset your style (RESET.CSS);

Thirdly, a simple semantic core layout;

use simple techniques for important page elements, such as navigation menus and other elements.

Using these tips is nothing more than keeping your HTML simple and clean, and the key parts of your page layout (elements) do not rely too much on modern techniques, such as CSS3 effects or JS scripts.

Say so much, what kind of layout or HTML structure is simple and clean? Here we teach you a quick test method. You first ban all the styles (and information related to styles) in your page, open them in your browser, and if your content is organized and easy to read, then your structure will not go any worse.

Responsive design--meta Label

Finally, there is an indispensable thing, that is the META tag, it can be said that in the responsive design without this meta tag, you are lame, responsive design is empty talk.

A meta tag is referred to as the visual area meta tag, and is used in the following way.

<meta name= "viewport" content= ""/>

The following attribute values are primarily included in the content property to handle the viewable area.

In the actual project, in order to let responsive design in the smart device can display normal, that is, browse the Web page to fit the screen size, displayed on the screen, can be reset by the meta tag of this viewable area, tell him to use the width of the device as the width of the view, This means that the effect of the default adaptive page is forbidden, as follows:

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

Another point, because the responsive design is a combination of CSS3 media queries properties, to show the responsive design style, but we all know that in Ie6-8 is completely unsupported CSS3 Media. Let's take a look at CSS3 Meida queries in the standard equipment, you can add these styles to your style file, or create a separate name "Responsive.css" file, and in the appropriate conditions to write your style, so that he fit your design needs.

Script:

Media-queries.js (http://code.google.com/p/css3-mediaqueries-js/)       respond.js (https://github.com/ Scottjehl/respond) <!-[if lt ie9]>      <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/ Trunk/css3-mediaqueries.js></script>? <! [endif]>  

Responsive design-resolution settings for different devices

Let's take a look at CSS3 Meida queries in the standard equipment, you can add these styles to your style file, or create a separate name "Responsive.css" file, and in the appropriate conditions to write your style, so that he fit your design needs:

1.1024px Display Screen

@media screen and (max-width:1024px) {/                    * style write here */          }     

2.800px display screen

@media screen and (max-width:800px) {/              * style write here */          }     

3.640px display screen

@media screen and (max-width:640px) {/              * style written in this */            }     

4.iPad flat Panel display

@media screen and (max-device-width:1024px) and (Orientation:landscape) {/              * style written in this */            }     

5.iPad vertical Panel display

@media screen and (max-device-width:768px) and (orientation:portrait) {/         * style written in this */            }     

6.iPhone and the Smartphones

@media screen and (min-device-width:320px) and (min-device-width:480px) {/              * style written in this */            }     

The use of this is now quite mature, and the second version of Twitter's bootstrap has added to this. You can compare:

@media (max-width:480px) {...}

@media (max-width:768px) {...}

@media (min-width:768px) and (max-width:980px) {...}

@media (min-width:1200px) {..}

Responsive design------Responsive designs