Responsive WEB design_html/css_WEB-ITnose

I have recently been learning about responsive design and have sorted it out. Some of the pictures are from the Internet.

1. Why responsive web design is needed

Due to the current large-scale use of mobile devices and the gradual large differences in the size of PC monitors, traditional web pages have It cannot meet the browsing effect of multiple devices. For example, traditional pages will have a large blank area in large browsers, but in small browsers and mobile devices, the page cannot be fully displayed, or the page can be reduced to fit the size of mobile devices. The size cannot be browsed normally, and it also affects click points. Many people will choose to enlarge the page while browsing, so the entire page needs to be dragged continuously, giving the user a bad experience.

In short, there are the following points:

2. What is responsive web design

A website is compatible with multiple terminals.

3. Alternatives to responsive design

Develop a completely independent mobile version of the website and develop a mobile application APP. However, there are certain shortcomings in doing so:

4. Advantages & disadvantages of responsive web design

Advantages:

Disadvantages:

5. The difference between responsive and adaptive

　Responsive layout: fluid network

Adaptive layout: fixed breakpoints

6. Mobile terminal screen elements

Mobile device browser core: Trident (IE), Gecko (FF), Presto (opera, obsolete), Webkit (Safari, chrome), Blink (google)

Mobile device size: iPhone (980), iPad (1024), Android (resolution 480*800, 980), WinPhone (1024), etc.

Resolution of mobile device:

7. Responsive web design process

User research and device specification estimation

Framework prototype planning and testing

Visual design

Front-end construction