Home » All Lessons » The Viewport Meta Tag and Media Queries

LESSON 8.2

The Viewport Meta Tag and Media Queries

Two essentials that make responsive design work

Learn what the viewport meta tag does and why every page needs it, then learn how to write media queries that apply different styles at different screen widths.

💡 The Concept

The Viewport Meta Tag

The viewport meta tag and media queries are the two essential tools for making websites that adapt to different screen sizes. The viewport is the visible area of a web page in the browser. On a desktop monitor it might be 1400 pixels wide; on a smartphone it could be 375 pixels. Without any instruction, mobile browsers assume your page was designed for a wide desktop screen and shrink everything down to fit, making text tiny and layouts impossible to read.

The viewport meta tag fixes this. Place it inside the <head> of every HTML file you create:

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

width=device-width tells the browser to use the real screen width instead of a virtual desktop width. initial-scale=1 sets the zoom level to normal when the page loads. Together they ensure your CSS sees the actual device width and your responsive styles work as expected.

The best place for it is right after the <meta charset> tag:

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>My Page</title>
   <link rel="stylesheet" href="styles.css">
</head>

A responsive website shown on desktop, laptop, tablet, and smartphone — A responsive website adapts its layout across all screen sizes.

Here is a helpful way to think about these two tools. The viewport meta tag is a one-time setup: you add it to your website template once and never touch it again. Media queries are the opposite. You will spend a lot of time writing and tweaking them throughout your web development career, fine-tuning how each design responds at different screen sizes.

Media Queries

A media query is a CSS rule that only takes effect when a condition is true, most commonly when the screen is a certain width or narrower. It is the core tool of responsive design.

Write @media followed by a condition in parentheses. The styles inside only apply when that condition is met:

@media (max-width: 768px) {
   h1 {
      font-size: 2em;
   }
}

Note the two closing curly braces: one closes the CSS rule and the second closes the media query itself.

max-width vs. min-width

max-width applies styles when the screen is that width or narrower. Most beginners start with max-width, writing default desktop styles first and then adding overrides for smaller screens:

/* Default: desktop */
h1 {
   font-size: 4em;
}

/* Override for screens 768px or narrower */
@media (max-width: 768px) {
   h1 {
      font-size: 2em;
   }
}

Common Breakpoints

The best breakpoints are wherever your own design starts to break. These are common starting points:

/* Tablets */
@media (max-width: 768px) { ... }

/* Smartphones */
@media (max-width: 576px) { ... }

Testing with Chrome DevTools

Right-click on the page, choose Inspect, then click the smartphone icon in the top-left of the DevTools panel (Toggle Device Toolbar). Select a specific device or drag the viewport to any width to watch your breakpoints fire in real time.

🎬 Video Demonstration

This video demonstrates the viewport meta tag and how to write media queries for different screen sizes.

Exercise: Try It Yourself

Open your website template, any existing HTML file, or JSFiddle. We’ll use the <h1> tag to see media queries in action. It’s a perfect example because a heading that looks great on desktop often needs to shrink on a phone.

Step 1. Add the viewport meta tag to your HTML <head>

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

💡 Working in JSFiddle? You can skip this step. JSFiddle does not use a viewport meta tag, and your media queries will still respond when you drag the result panel or use the DevTools device toolbar. But if you have a website template or any existing site, you must add the viewport meta tag to the <head> of every page, or your media queries will not behave correctly on real phones.

Step 2. Add an <h1>, something like this:

<h1>My Favorite Things</h1>

Step 3. Set the h1 font size to 4em in your CSS.

Step 4. Write a media query that changes the h1 font size to 1.8em for screens narrower than 1024px (tablet size).

Step 5. Write a media query that changes the h1 font size to 1.5em for screens narrower than 768px (smartphone size).

/*CSS without a media query--applies to all sizes unless overridden*/
h1{
   font-size: 4em;
 }
/* CSS Adjustments for Tablets */
@media only screen and (max-width: 1024px) {
   h1{
      font-size: 1.8em;
   }
}
/* CSS Adjustments for Smartphones */
@media only screen and (max-width: 768px) {
   h1{
      font-size: 1.5em;
   }
}

Check your media queries in either the inspector or by dragging the screen size to the breakpoints.

💡 If you are making a website template: Add the viewport meta tag and the two media query blocks to your website template. See the full website template guide for reference.

Answer key. As you drag the result panel narrower, the <h1> should resize at each breakpoint:

JSFiddle result showing the h1 at 4em on a wide desktop panel — Desktop and wide screens: with no media query active, the h1 stays at its default 4em.

JSFiddle result showing the h1 at 1.8em at tablet width — Tablet width (max-width: 1024px): the h1 shrinks to 1.8em.

JSFiddle result showing the h1 at 1.5em at smartphone width — Smartphone width (max-width: 768px): the h1 shrinks again to 1.5em.

❓ Frequently Asked Questions

Do I need the viewport meta tag even if I’m using a responsive CSS framework?

Yes. The viewport meta tag is required regardless of what CSS framework you use. Without it, mobile browsers will render the page at a virtual desktop width and scale it down, overriding all your responsive CSS. It takes one line and should go in the <head> of every page you build.

What is the difference between max-width and min-width in a media query?

max-width applies styles when the screen is at or below the value you set, so @media (max-width: 768px) targets phones and small tablets. min-width applies styles when the screen is at or above the value, which is used in mobile-first design where you start with small-screen styles and layer on complexity for larger screens. Most beginners find max-width easier to start with.

How do I test my media queries without a real phone?

Chrome DevTools has a built-in device emulator. Right-click on your page, choose Inspect, then click the smartphone icon in the top-left of the panel (Toggle Device Toolbar). You can choose a specific device from the dropdown or drag the viewport edge to any width to watch your breakpoints fire in real time.

★ Key Takeaways

Responsive web design is the standard for every website you build. A viewport meta tag, some thoughtful CSS, and well-placed media queries are all it takes to make a layout that works on any screen. Here’s a quick checklist:

Set the viewport meta tag in your HTML <head> on every page.
Write media queries to adjust font sizes, layouts, and visibility at key breakpoints.
Test using Chrome DevTools by selecting a device or dragging the viewport to any width.
Think mobile-first: design for the smallest screen first, then build up for larger screens.

Next, you will learn how to show or hide different content depending on the device, giving you even more control over the mobile experience.

Next Lesson: Showing Different Content on Mobile

← Back to Responsive Design Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.