Web Design

Responsive	Adaptive
Scaling the interface to fit the user’s device through media-queries, or CSS3 module that allows you to set different styles (or even style sheets) depending on the screen resolution, size, and other characteristics.	While sites created with responsive design technology look the same regardless of device size – an adaptive resource detects from which device the user is accessing the site and displays the version of the site that was designed specifically for that type of device.
One layout for all devices.	Uses multiple fixed layouts that switch depending on the device.
Changes are made to a single design.	Based on server-side or client-side logic for layout selection.
Suitable for dynamic window resizing (e.g. when changing the browser size)	Allows for device-specific features (e.g. touch screen)

Conclusion

I prefer Responsive, because despite its disadvantages such as “May be slower because all content is loaded, including images that may not display on smaller screens”, I think it is more convenient for me than Adaptive.

Despite the difference in performance, I believe Adaptive design is more difficult to implement. Using multiple layers for different devices doesn’t seem like a good idea because it increases development and support costs.

Responsive Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Show Different Images Depending on Browser Width</h2>
<p>Resize the browser width and the image will change at 600px and 1500px.</p>

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

Adaptive example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adaptive Design Example</title>
    <style>
        /* Styling for mobile devices */
        @media (max-width: 600px) {
            body {
                background-color: lightblue;
                font-size: 14px;
            }
            img {
                width: 100px;
            }
        }

        /* Styling for tablets */
        @media (min-width: 601px) and (max-width: 1024px) {
            body {
                background-color: lightgreen;
                font-size: 18px;
            }
            img {
                width: 200px;
            }
        }

        /* Styling for desktop */
        @media (min-width: 1025px) {
            body {
                background-color: lightcoral;
                font-size: 22px;
            }
            img {
                width: 300px;
            }
        }
    </style>
</head>
<body>
    <h1>Adaptive Design Example</h1>
    <p>This example changes the style and size of images depending on the device.</p>
    <img src="example.jpg" alt="Example">
</body>
</html>

Applied Responsive design to my index.html
https://timurbasirov23.thkit.ee/