Detailed explanation of the difference between adaptive and responsive analysis in vernacular

Based on daily development experience and relevant online information, the difference between adaptive and responsive is analyzed in simple and easy-to-understand language. Note: This article only analyzes the difference between adaptive and responsive and understands the background of their origin, not discussing how to use them

1. What is adaptive layout?

Adaptive layout is a layout that adapts to the width of the web page. On devices of different sizes, the width of the web page is scaled in proportion to present the same main content and layout.

Adaptive layout demonstration diagram:

As the screen width increases, the web page content also increases in proportion. Regardless of the screen width, the main layout of the web page is always the same

2. What is responsive layout?

Responsive layout means that the content layout of the page will automatically adjust according to the screen size, presenting a better user experience.

Responsive layout demonstration diagram:

As the screen width is scaled, the page will adjust accordingly, and the layout and displayed content will change.

1. Background of adaptive layout

In the early days of the PC era, web designers would design pages with a fixed width. The earliest computer monitors had a limited variety of resolutions because there were so few computers at the time. Later, as the number of monitor types increased and laptops and tablets became more popular, problems arose with this fixed-width page. So a new layout method emerged, width adaptive layout. The adaptive layout we usually talk about mostly refers to the width adaptive layout

Later, the Internet war expanded from PCs to mobile phones, and the HTML5 standard was released. Adaptive layout has also extended from PC to mobile phones, and adaptive layout has become popular and a necessary requirement for web design.

2. The background of responsive layout

Although adaptability has become a necessary requirement for web design, it still exposes a problem. If the screen is too small, even if the web content can be adapted according to the screen size, when viewed on a small screen, the content will feel too crowded, reducing the user experience. At this point, the concept derived to solve this problem is responsive layout. It can automatically detect the screen width and adjust accordingly. The layout and content of the website will change.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.