HTML Responsive

The Viewport Meta Tag

Mobile browsers automatically zoom out to fit large desktop layouts on smaller screens, making text tiny and hard to read.

The viewport meta tag instructs mobile devices to render the page layout at the device's native scale, ensuring comfortable reading sizes.

Example: The Viewport Meta Tag

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Fluid Container Widths

Instead of defining container widths in fixed pixels (which can overflow small mobile screens), fluid layouts use relative percentage values. This allows your columns and boxes to shrink and expand dynamically to fit any screen size.

Example: Fluid Container Widths

<div style="width: 80%; max-width: 1000px;">
  Fluid container
</div>

Scalable Responsive Images

Large images can easily break your page layout on mobile screens by running off the side of the display. By applying relative widths and height controls using CSS, you can make your images scale down automatically to fit any device size.

Example: Scalable Responsive Images

<img src="photo.jpg" style="max-width: 100%; height: auto;" alt="Photo">

Fluid Relative Typography

Fixed pixel font sizes (like font-size: 16px) do not adjust to different screens, which can make text hard to read.

Using relative CSS units (like em, rem, or vw) allows your text sizes to scale dynamically relative to the user's browser or screen dimensions.

Example: Fluid Relative Typography

<p style="font-size: 1rem;">Text that scales with the root font size</p>

Introduction to CSS Media Queries

While HTML structures your content, CSS media queries are what allow you to build fully responsive designs. They act like conditional statements in your code, letting you apply specific layout rules based on the user's screen width.

Example: Introduction to CSS Media Queries

<style>
  @media (max-width: 600px) {
    body {
      font-size: 14px;
    }
  }
</style>

CSS Breakpoints Explained

A breakpoint is a specific screen width where your layout changes to better fit the available space, defined using a media query.

Common breakpoints target roughly phone, tablet, and desktop sizes, though the exact numbers should be based on where your own design actually starts to look broken, not arbitrary device widths.

Example: CSS Breakpoints Explained

<style>
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
</style>
<div class="container">Resize the viewport to see the width change at 768px</div>

Responsive Tables Technique

Wide tables with many columns are one of the hardest things to make mobile-friendly, since shrinking every column makes text unreadable.

A common technique is wrapping the table in a scrollable container so users can swipe sideways, or restacking each row into a card layout on small screens using CSS.

Example: Responsive Tables Technique

<div style="overflow-x: auto;">
  <table>
    <tr><td>Wide table content</td></tr>
  </table>
</div>

Mobile-First Approach

Mobile-first means writing your base CSS for small screens first, then using min-width media queries to add complexity as the screen gets larger, rather than the reverse.

This approach tends to produce simpler, faster-loading CSS since phones — the most constrained devices — get the styles that matter most without any overrides.

Example: Mobile-First Approach

<style>
  .box { width: 100%; }
  @media (min-width: 768px) {
    .box { width: 50%; }
  }
</style>
<div class="box">Full width on mobile, half width from 768px up</div>