Responsive Design Example

With the increasing popularity of android and ios devices, responsive design is becoming increasingly popular. Some time ago I studied amazon and several foreign websites and summarized some responsive ideas. Just recently, company has a special topic to create, so I followed the previous research, I have made a responsive topic. At present, the topic has been completed. I will summarize the experience and post it for your reference. I hope you can give us some guidance. (Subject address: http://www.tuniu.com/static/lowest)

The response has three core features:

1. media query attribute of css3, which is a cornerstone of response

2. Elastic Layout

3. Elastic Images

Media query attributes are described last time.

I feel that the difficulty of the corresponding layout is 2 and 3. The elastic layout requires that the page should not use the most familiar front-end px, but only the percentage, but the percentage will cause many problems. The most important thing is the problem of image stretching and compression. Image stretching means that the image cannot be larger than the original size. One of them is not deformed, that is, the ratio of width to height cannot be changed, second, the image cannot be stretched more or wider than the original image (the original size of the fake image is 100*50, and the maximum width of the image is 100, and the maximum size is 50 ), this is well controlled under the general layout, but it is difficult to control the percentage layout and different resolutions. Take the calculator for careful calculation.

Another point is the content organization. In the case of small screens, two methods are generally used to change the layout. One is to hide the content, and the other is to change the content position; in this way, we need to distinguish between the primary and secondary content and discard the content under certain circumstances. There is also a possibility that it has a lot to do with the UI Designer, because the page is presented in different ways at different resolutions, so the designer needs to design different resolution rendering styles. How can we determine the specific resolution, the topic I just selected is just a few items. I haven't made any further research on the specific selection method. However, in general, the classification should be consistent with the resolution and size of mobile devices on the market.

This is just an attempt. I will post some small summaries on this topic. I hope you will not be enlightened.