Learning HTML - Responsive with Media Queries and Adaptive Images

#Introduction

Users access the web from phones, tablets, and wide screens. Episode 20 covers responsive design: the meta viewport and relative units for a fluid foundation, media queries with a mobile-first approach, and srcset, sizes, and picture so images stay sharp and data-efficient.

Responsive doesn't mean a small page on phones and a big one on desktops. It means one piece of content that arranges itself to fit the available space, with the right assets for each device.

#The Basics of a Fluid Layout

#viewport and Relative Units

Without the meta viewport, a phone renders the page at desktop width then shrinks it. Set the width to the device and start from scale one:

Meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Use relative units, not fixed pixels, for sizes that adapt. % for widths, rem for text, and vw or vh for sizes relative to the viewport.

#Mobile-First Media Queries

Write base styles for small screens first, then enhance with min-width. This is the mobile-first approach — a lightweight base, with improvements for larger screens:

Mobile-first media query

.lajur {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
 
@media (min-width: 768px) {
  .lajur {
    grid-template-columns: 1fr 1fr;
  }
}
 
@media (min-width: 1200px) {
  .lajur {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

The same condition can be checked from JavaScript with window.matchMedia("(min-width: 768px)").matches. Breakpoints are chosen based on content, not specific devices; 768 and 1200 pixels are just common starting points.

#Adaptive Images

#srcset and sizes

The same image doesn't need to be sent at full size to every screen. srcset offers several versions with their widths, and sizes tells the browser the space available:

Responsive image

<img
  srcset="pantai-kecil.png 480w, pantai-sedang.png 1024w, pantai-besar.png 1600w"
  sizes="(min-width: 1200px) 50vw, 100vw"
  src="pantai-sedang.png"
  alt="Pemandangan pantai saat senja"
>

The browser picks the most efficient combination based on screen width, device pixel ratio, and the sizes value. src stays as a fallback for older browsers.

#The picture Element

picture gives full control with ordered <source> elements and img as the base. It fits modern formats and images that change composition:

The picture element

<picture>
  <source media="(min-width: 768px)" srcset="panorama-lebar.webp">
  <source type="image/webp" srcset="panorama.webp">
  <img src="panorama.jpg" alt="Panorama pegunungan dari puncak">
</picture>

The browser uses the first matching <source>; unsupported ones are skipped. The img with src and alt is the base layer that must always exist.

#Art Direction vs Format

picture solves two problems. Art direction: images that change composition on different screens. Format: lighter webp or avif files with a jpeg img as fallback. srcset handles sizing only.

#Exercise: A Responsive Gallery

Build a three-column gallery that collapses to one column on phones:

Responsive gallery

<div class="galeri">
  <img srcset="foto1-kecil.png 480w, foto1-besar.png 1200w"
       sizes="(min-width: 768px) 33vw, 100vw"
       src="foto1-besar.png" alt="Bunga di taman" loading="lazy">
  <img srcset="foto2-kecil.png 480w, foto2-besar.png 1200w"
       sizes="(min-width: 768px) 33vw, 100vw"
       src="foto2-besar.png" alt="Pohon rindang" loading="lazy">
  <img srcset="foto3-kecil.png 480w, foto3-besar.png 1200w"
       sizes="(min-width: 768px) 33vw, 100vw"
       src="foto3-besar.png" alt="Jalan setapak" loading="lazy">
</div>

Combine it with CSS that uses one column when small and three columns after 768 pixels. Test by changing the window width and looking at the device tab in the developer tools.

#Common Mistakes and Solutions

#srcset Without sizes

Without sizes, the browser guesses the image width. Always write sizes for accurate decision-making.

#A Breakpoint for Every Device

Adding a breakpoint for each phone model is endless maintenance. Pick three to five points based on content and keep them.

#Closing

Episode 20 makes your pages adapt: viewport and relative units as the base, mobile-first media queries for layout, and srcset, sizes, and picture for images that fit every device.

Key takeaways:

• meta viewport is a prerequisite for every responsive page.
• Write mobile-first styles and enhance with min-width.
• Breakpoints are chosen from content, not from device models.
• srcset and sizes pick an image version based on the screen.
• picture handles format and art direction with a fallback.
• img is always the base layer of a picture.

In the next episode, episode 21, we'll cover HTML performance optimization and mobile accessibility — preload and preconnect, lazy loading, and touch targets and text sizes for a comfortable phone experience.