What is Breakpoints in CSS?

CSSmarkup~5 mins

Breakpoints in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Breakpoints help your website look good on different screen sizes like phones, tablets, and computers.

You want your website text to be bigger on small screens for easy reading.

You want to change the layout from one column on phones to multiple columns on desktops.

You want images to resize or move depending on the device screen size.

You want buttons to be easier to tap on mobile devices.

You want to hide or show certain parts of your page on different devices.

Syntax

CSS

@media (condition) {
  /* CSS rules here */
}

Use @media to start a breakpoint rule.

Conditions like max-width or min-width define when the styles apply.

Examples

This changes the background color to light blue on screens 600px wide or smaller.

CSS

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

This sets a bigger font size for tablets between 601px and 1024px wide.

CSS

@media (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 1.2rem;
  }
}

This sets an even bigger font size for desktops wider than 1024px.

CSS

@media (min-width: 1025px) {
  body {
    font-size: 1.5rem;
  }
}

Sample Program

This page changes background color and font size depending on the screen width using breakpoints.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Breakpoints Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: white;
      color: black;
      margin: 2rem;
      font-size: 1rem;
    }
    @media (max-width: 600px) {
      body {
        background-color: #d0f0fd;
        font-size: 1.2rem;
      }
    }
    @media (min-width: 601px) and (max-width: 1024px) {
      body {
        background-color: #f0e68c;
        font-size: 1.4rem;
      }
    }
    @media (min-width: 1025px) {
      body {
        background-color: #90ee90;
        font-size: 1.6rem;
      }
    }
  </style>
</head>
<body>
  <h1>Welcome to Responsive Design</h1>
  <p>Resize the browser window to see the background color and font size change.</p>
</body>
</html>

OutputSuccess

Important Notes

Always include the viewport meta tag for breakpoints to work well on mobile devices.

Use relative units like rem for font sizes to keep scaling consistent.

Test your breakpoints by resizing your browser or using device simulation in browser DevTools.

Summary

Breakpoints let you change styles based on screen size.

Use @media with conditions like max-width or min-width.

They help make websites look good on phones, tablets, and desktops.