What is the difference between responsive layout and adaptive layout

The differences between responsive layout and adaptive layout are: the former only needs to develop one set of interfaces, while the latter needs to develop multiple sets of interfaces to adapt to different terminals; if the screen is too small, adaptive content will be crowded and responsive This will not happen

Many people often confuse responsive layout and adaptive layout. Today I will introduce to you what the two represent and the difference between them. It has a certain reference function and I hope it will be helpful to everyone

[Recommended course: Learn website layout in 30 minutes】

##Responsive layout:

Responsive layout is to realize different display methods for browsing web pages on terminals with different screen resolutions. Responsive design can make the website have a better browsing and reading experience on mobile phones and tablets. In other words, a website can be compatible with multiple terminals, rather than making a specific version for each terminal

Adaptive layout:

Adaptive layout refers to new web design methods and technologies that enable web pages to be adaptively displayed on terminal devices of different sizes. It requires the development of multiple sets of interfaces to adapt to different terminals

The difference between responsive layout and adaptive layout

(1) Adaptive layout detects the viewport resolution to determine whether the currently accessed device is: PC, tablet, or mobile phone, thereby requesting the service layer and returning different pages; responsive layout detects the viewport resolution to target different clients in The client does code processing to display different layouts and content.

(2) Adaptive layout requires the development of multiple sets of interfaces, while responsive layout only requires the development of one set of interfaces

(3) Adaptive screen adaptation of the page is Within a certain range: for example, the PC version is generally larger than 1024 pixels, and the mobile phone version is smaller than 768 pixels. The responsive layout is a set of pages that all adapt

(4) Adaptive layout If the screen is too small, the content will be overcrowded. The responsive layout is a concept derived to solve this problem. It can automatically identify the screen width and make corresponding adjustments to the web design

In short, the responsive layout is still better than the adaptive layout. But adaptive layout is more practical, because you only need to consider a few states instead of many states like responsive layout. So no matter what kind of design has their own characteristics, we have to choose the appropriate layout method according to the needs of the project

Summary: The above is the entire content of this article, I hope it will be helpful to everyone .

The above is the detailed content of What is the difference between responsive layout and adaptive layout. For more information, please follow other related articles on the PHP Chinese website!