To see the difference, you need to open the website in a non-full window and navigate to either a adaptive web page or a responsive web page. After that, you can reduce or enlarge the window and you will notice that the colors of the blocks change (this means that the web page adjusts to your window resolution). On an adaptive web page, I set the blocks to change when the window is less than 1200px and the same with 800px. With the responsive web page, I set the default borders to 1200px (originally responsive blocks stretched across the entire page and I set a limit to stretch them to a maximum of 1200px), 1000px and 600px. On an adaptive web page, you can see that the appearance of new block colors when the window resolution changes is very sharp, and with a responsive web page, the change in block colors is very smooth and almost invisible.
Adaptive and responsive websites both refer to the design approach for creating websites that work well on multiple devices with varying screen sizes. However, there are some key differences between the two:
Adaptive design: In this approach, the website layout changes based on specific pre-defined screen sizes, also known as breakpoints. The layout adjusts to fit the device's screen by using different fixed-width designs for different screen sizes. This means that an adaptive website will have multiple layouts, one for each defined screen size.
Responsive design: In this approach, the layout of a website automatically adjusts to fit any screen size, whether it is a desktop computer, tablet or mobile phone. The layout is fluid and flexible, adapting to the size of the screen. This is achieved through the use of CSS media queries and flexible grid-based layouts.