Introduction to Media Queries

🧠What are Media Queries?

Media queries let you apply different CSS styles depending on the device's characteristics like screen size, resolution, or orientation.

🛠️ In simple words: Media queries help your website look good on all screen sizes — mobile, tablet, or desktop.

🎯 Why Use Media Queries?

✅ Make your layout responsive.

📱 Adjust content for mobile, tablet, or desktop screens.

🔒 Prevent content overflow and horizontal scrolling.

👁️ Show/hide elements based on device type.

👀 CSS Media Types

✅ all (Rarely used explicitly)

• Meaning: Applies the styles to all media types (screen, print, speech, etc.)

• Usage:

  • It's the default, so you usually don’t need to write it.

  • Only useful when you’re combining multiple media types or writing conditional rules.

🖨️ print (Used for print-specific layouts)

• Meaning: Applies styles only when printing or viewing print preview.

• Usage: Still quite useful for providing a clean print version of your pages.

✅ Real-world use cases:

• Invoice pages

• Reports or tickets

• Disabling elements like navbars or ads for printing

🖥️ screen (Most common)

• For styling what’s seen on screens (monitors, phones, etc.)

🚀 CSS Common Media Features

Here are some commonly used media features:

🔧 Basic Syntax

@media media-type and (condition) {
/* CSS rules go here */
}

✏️ Simple Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Query Example</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Resize the screen!</h1>
    <p>The background color changes if the screen width is 768px or less.</p>
  </body>
</html>

/* Default style for larger screens */
body {
  background-color: white;
  text-align: center;
  padding: 50px;
}

/* Responsive style for smaller screens */
@media screen and (max-width: 768px) {
  body {
    background-color: tomato;
    color: white;
  }
}

📏 Common Device Breakpoints

💡 Orientation Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Text & Padding</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Responsive Design with Media Queries</h1>
    <p>
      Resize your browser window or view this page on a tablet or mobile device.
      The font size and padding of the page will adjust to provide a better
      reading experience based on your screen size.
    </p>
  </body>
</html>

/* Default style (for desktop) */
body {
  font-size: 24px;
  padding: 40px;
}
/* Mobile view (≤ 480px) */
@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
    padding: 10px;
    background: tomato;
    color: white;
  }
}
@media ( orientation: landscape) {
  body {
    background: linear-gradient(to right, #00c6ff, #0072ff); /* Blue gradient */
    color: white;
  }
}

✨ For screen with orientation landscape it shows gradient background color.

📌 Best Practices

✅ Use mobile-first approach (min-width) for better performance.

✅ Combine Flexbox / Grid + Media Queries.

✅ Avoid too many breakpoints — keep it simple.

✅ Test on actual devices or browser dev tools.