Create a responsive layout----use a grid

1. Pure Grids : Create the environment for the raster system you need,CSS Framework

2, BootStrap

3, Foundation: Released some excellent modal, lightbox and content slider solution; Used to create a streaming grid of columns

4. Gridpak: Generate raster system based on your input

5. Golden Grid System: An easy-to-use grid of grids designed to support a wide range of screens from small screens to higher resolutions than 2560px

6. Frameless: Handle flexible and responsive layouts

7, the responsive design has the elasticity, the flexibility characteristic; The self-adapting layout is fixed, static, or in the layout of the rigorous

8. Response Grid pros and Cons:

Advantages:

A: Ability to use all available screen space

B: Allow content to reflow and remain within the boundaries of each column

C: Can be used in the corresponding image technology, on different sizes of the screen

Disadvantages:

A: More effort is needed to ensure that the design remains in effect when the screen is stretched

B: Need to select the right image, thus increasing maintenance costs

C: Trying to be flexible with the designer, his learning curve is rather steep

9. Adaptive Raster:

Advantage:

A: With media queries, you can get as close to the pixel-perfect layout as possible

B: More easily understood and implemented

C: Avoid pixel limbo - when design is destroyed in extreme equipment or mutation point overlap area

Disadvantages:

A: Wasted a lot of screen space and edge space

B: Need more mutation points to fill the blanks

10. Use responsive design on small screen, use adaptive design on large screen

11. Responsive and self-adapting:

Responsive web design mainly for the web side, but when the mobile display, can display the main content, will not show the other sidebar and so on, to hide some of the content, that is, a website can be compatible with multiple terminals-not for each terminal to do a specific version.

A: First of all, what is the key difference between responsive and adaptive?

In short, the response is the equivalent of liquid, it can automatically adapt to different sizes of the screen, no matter how wonderful the size of your device. Responsive using CSS media queries method, according to the target device automatically change style such as display type , width, height, etc., which can solve the different screen size display problem.

Adaptive design is based on a breakpoint using static layout, once the page is loaded can no longer be automatically adapted, adaptive will automatically detect the size of the screen to load the appropriate work layout, that is, when you want to use the adaptive design of the site, you have to design a 6 common screen layout.

B: Because the response basically disrupts the surrounding content to ensure smooth compliance with the device window , you need to pay special attention to the visual hierarchy design because the content around it has been disrupted

C: If you are only considering screen compatibility issues, it is safe to say that responsive design is often the preferred technology

Create a responsive layout----use a grid