Responsive layouts and mobile-side layouts

A responsive layout is the effect of a responsive design presentation. In particular, the layout of the page will be based on the display area of different devices (mainly width) different layout, the effect is better than the elastic layout of the place is the style will be active according to the user's device display area of the layout more flexible, more readable. Of course, the requirements for research and development are also higher (for example, how to better let the picture, adaptation, UI animation adaptive to various layouts). Responsive design is generally a set of design solutions to solve the adaptive problems of all devices. The corresponding style file may be multiple, or you can write only one (you can declare a different media query in a CSS file).

The mobile layout is the result of the traditional design of fixed width or elastic layout. In general, this layout design and development are relatively simple, while the design of the effect can be more refined, more detailed. But the bad place is if you want to adapt to a lot of different equipment, you need to design multiple sets of design, or to compare small screen solution to adapt to a number of large screens, the effect may not be particularly good.

A general approach to responsive design is to make three or four layouts based on the primary type of access device that the target user is accessing. Each layout has a range, such as the small screen phone resolution can be set to [320,640]. Then each layout can be designed separately, in general, each layout is mainly to adjust the arrangement of the module layout order, content adjustment less the better (minimize user adaptation costs).

The difference:

1, the adaptation of different groups, responsive to a variety of terminals, and the majority of the shift is mainly smart phone-based
2, responsive layout can be based on different end-devices to achieve different page layout, and mobile layout is mostly single-column layout
3, the response layout may cause redundant code more (traditional response layout, relying only on media queries, control of different page layouts), Mobile layout Redundancy code is less, more targeted.

In the same place:

1, on the smartphone, the response to see the page effect can be the same effect as the mobile side
2, both have to face the problem of adaptation

Responsive layouts and mobile-side layouts