What are adaptive and responsive web pages?

An Adaptive Web Design has predefined layouts that switch depending on the viewport width. When the screen size changes, the page "adapts" to the new size by loading the corresponding layout.

A Responsive Web Design uses flexible grids, images, and CSS media queries to dynamically change the layout based on the device's characteristics. Content and elements smoothly adjust to the available space rather than switching between fixed layouts.

Main differences:

Characteristic	Adaptive Web Design	Responsive Web Design
Layout	Fixed, predefined	Fluid, flexible
Approach	Switching between layouts	Smooth scaling and adjustment
Media queries	Used for switching	Used for adjustments
Flexibility	Less	More
Performance	Potentially higher (loading one layout)	May be lower (scaling)

Example of a media query for responsive design:

/* For screens up to 600px */
@media (max-width: 600px) {
  .container {
    width: 100%; /* Occupy full width */
  }
  .sidebar {
    display: none; /* Hide sidebar */
  }
}

Example of a media query for adaptive design (layout switching):

/* Base layout (for desktops) */
.layout {
  display: flex;
}

/* Layout for screens up to 768px */
@media (max-width: 768px) {
  .layout {
    display: block; /* Switch to block model */
  }
}