Summary of response development

The contents of the document are very miscellaneous, the general use is to know what to search directly.

Response type

In May 2010, Ethan Marcotte a concept designed to make a Web site compatible with a variety of devices, rather than customizing different versions for different devices. If we think of our site as a program, the response design requires that the site can provide more user-side optional parameters, so that users have more control.

Font size response

The font size here refers to the user setting or the default font size for the device. Similarly, 12px characters are different from one device to another, but the device always provides a default font size (or a user-specified) that has a good impression. So in order to make our website text on different devices can also have a good impression, the site should use EM instead of PX. EM defines a relative size, by which the designer can define where the word should be larger, where the word should be smaller, but not where the word must be large.

Screen size response

Screen size is our main need to respond to the location, screen size, width and height ratio, and other factors will affect our layout, the size of the content. More commonly used to solve the size of the layout is a fixed layout, flow layout, grid layout, these layout methods are often mixed use.

Fixed layout: The center of the page, white on both sides, he can adapt to a certain range of values greater than the width, but if too wide there will be a lot of white, too narrow will appear scroll bar, on the PC page is very common.

Flow layout: Screen size changes in a certain range, do not change the module layout, only change the module size ratio. More responsive than the fixed layout, both sides do not leave white, but also can only adapt to a limited width range, otherwise the module will be squeezed (pull) is not the case.

Custom layouts: None of the above layouts can change across large sizes, so in due course we need to change the placement of the modules or hide some minor elements.

Grid layout: This layout makes the modules very easy to align, making it easy to change the location of the modules to assist in customizing the layout.

Screen Precision Response

The difference in pixel accuracy between screens results in a large difference in actual size of fixed pixels on different devices, in order to solve this problem we use the elastic layout, the elastic layout uses EM as the unit, and the reason is as mentioned in "Font size response". But because of the use of EM as a unit, so that we actually do not know the actual size of the interface, which causes the picture on the page may be too large (wasted bandwidth) or too small (fuzzy), so for the picture we need to according to the actual size of the need to load the corresponding size version. In addition to the latest (ipad3,iphone4) iOS devices, the 1px actually accounts for 4px (due to the high pixel density), so the image accuracy for these problems are handled separately.

Interactive response

Different devices support different modes of interaction, possibly touch screen or mouse operation, and may be a key operation. This can be done in a "progressive enhancement" approach, defining basic operations for the user and providing more grounded gas operations (such as gestures) on advanced equipment.

Network condition response

Users can choose not to download some of the bandwidth-consuming resources in a slow-speed network.

Other feature responses

such as GPS, gyroscope, telephone and other functions

Use scene response

For example, users in the car, or walking, can be based on these conditions to provide users with different operating experience.