Responsive design (responsive design)

First, 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, andRWD allows your Web pages to show different design styles on different devices . ”

The responsive layout design takes into account the order of the element layout and requires three conditions to be met:

• The site must be based on a flexible fluid grid

Fluid grids, a grid design that uses percent units per grid to control the grid size, so that the grid size is scaled proportionally to the size of the screen at any time

• Images referenced to a Web site must be scalable

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.

img {max-width:100%;}

• Different display styles, need to write different styles on media querues

Depending on the current width of the device used by the user, your Web page will load an alternate style that implements a specific page style.

Responsive design (responsive design)