Responsive

1. Only one set of interfaces needs to be developed.
2. The screen adaptation of the page is within a certain range: for example, one set of adaptation for PC (>1024), one set of adaptation for tablet (768-1024), and one set of adaptation for mobile phone (<768); one set of adaptation for responsive design. (As you can imagine, the content to be considered in responsive design is much more complicated than that of adaptive design)
3. Create a web page and use CSS Media Query, Content-Based Breakpoint and other technologies to change the size of the web page to adapt to screens of different resolutions.

Adaptive

1. Need to develop multiple interfaces
2. By detecting the viewport resolution, we can determine whether the current access device is a PC, tablet, or mobile phone, and then request the service layer to return different pages. Responsive design detects the viewport resolution and performs code processing on the client side for different clients to display different layouts and content.
3. Create different web pages for different types of devices, and call the corresponding web page after detecting the device resolution size.

Distinguishing between responsive and adaptive

1. Open the URL using Chrome or Edge on your computer.
2. according to F12 Or right click your mouse and select Detection。
3. ClickDevice switch icon,As shown below

4. After switching,
   The layout displayed on the computer and mobile phone automatically switches.Responsive, such as this website;
   If the layout does not automatically adapt, the layout will switch and adapt after refreshing the page (the URL jumps or does not jump), that isAdaptive, such as Baidu;
   If there is no switch when refreshing, it is neither responsive nor adaptive, and it is not adapted to different devices.

suggestion

• Development perspective: single page, complex functions, use adaptive; simple functions, use responsive.
• SEO perspective: Search engines generally prefer responsive websites.

Summarize

• Responsive:A set of templates; Adapted by the front end, templates of different resolutions are merged into one page, and one page is downloaded when one template is downloaded.
• Adaptive:Multiple templates; Adapted by the backend, each resolution template has a page, and different resolution templates are downloaded separately.