CSS Media Queries

Media Queries help your website look good on all devices by applying different styles based on screen size and device properties.

🛠️ Breakpoints

Breakpoints define ranges for different screen sizes:

Device	Width Range
Small	0px - 600px
Medium	601px - 1024px
Large	1025px and above

Example:

@media (max-width: 600px) { /* Small Devices */ }
@media (min-width: 601px) and (max-width: 1024px) { /* Medium Devices */ }
@media (min-width: 1025px) { /* Large Devices */ }

🧩 Using @media Rule

The @media rule applies styles only if conditions match.

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

🎯 Responsive Layouts with Flexbox and Grid

Combine Flexbox or Grid with media queries to build adaptive layouts:

.container {
  display: flex;
  flex-direction: row;
}
 
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

📏 Media Features

Control styles based on the device's width and height.

Example:

@media (orientation: landscape) {
  body {
    background-color: peachpuff;
  }
}

📱 Mobile First Design Approach

Start with small device styles first, then add larger device styles.

/* Mobile styles */
body {
  font-size: 14px;
}
 
/* Tablets */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}
 
/* Desktops */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

🧪 Try Yourself

import './styles.css';

function App() {
return (
  <div className="container">
    <h1>Responsive Design with CSS Media Queries</h1>
    <p>This layout adjusts based on screen size.</p>
  </div>
);
}

export default App;

Open Sandbox