📱 CSS Media Queries: A Complete Guide from Theory to Practice

Posted by

  


Media queries are a fundamental tool of Responsive Web Design, i.e. the approach to creating websites capable of automatically adapting to different screen sizes and devices (desktop, tablet, smartphone, TV...).

In this article we will see:

  • What are media queries
  • How they work
  • What are the main types of media features
  • Practical examples of use
  • Best practices and useful tools
🔗 Do you like Techelopment? Check out the site for all the details!

🧠 What is a media query?

A media query is a CSS rule that allows a style to be applied only if certain criteria related to the viewing device are met (such as screen width, orientation, resolution, etc.).

The basic syntax is:

@media device_type and (condition) {
  /* CSS Rules */
}

But in most cases, it is used like this:

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

👉 In this example, the body background color will become light blue only if the screen width is 768px or less.


📐 Why are they so important?

Imagine browsing a desktop-only website on your phone: small text, out-of-scale layout, a frustrating experience.

Media queries allow you to customize the appearance of the site based on the size and characteristics of the device, improving usability and accessibility.


🔍 Detailed syntax

@media [not|only] <media-type> and (<media-feature>) { 
  /* CSS rules */
}
  • media-type: device type (e.g. screen, print, all)
  • media-feature: properties to check (e.g. min-width, orientation)
  • not / only: optional operators to control the application

Combined example:

@media only screen and (min-width: 768px) and (max-width: 1024px) { 
  .menu { 
    display: block; 
  }
}

🔧 Most used media features

Media Feature Description Example
width, height Total width or height of the viewport max-width: 600px
min-width Apply styles from that width up min-width: 1024px
max-width Apply styles up to that width max-width: 768px
orientation Orientation (portrait or landscape) orientation: landscape
resolution Device resolution (e.g. for printing) min-resolution: 300dpi
prefers-color-scheme Detects the dark/light theme of the operating system prefers-color-scheme: dark

👨‍💻 Practical examples

✅ Simple responsive layout

/* Desktop styles (default) */
.container { 
  width: 800px; 
  margin: auto;
}

/* Tablet styles */
@media (max-width: 768px) { 
  .container { 
    width: 90%; 
  }
}

/* Smartphone styles */
@media (max-width: 480px) { 
  .container { 
    width: 100%; 
    padding: 10px; 
  }
}

🎨 Automatic dark theme

@media (prefers-color-scheme: dark) { 
  body { 
    background-color: #121212; 
    color: #f0f0f0; 
  }
}

📏 Changing layout based on width

.grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) { 
  .grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media (max-width: 480px) { 
  .grid { 
    grid-template-columns: 1fr; 
  }
}

💡 Best practices

  • Mobile First: Write your mobile styles first, then override with media queries for larger screens. 
    /* Mobile default */
.nav { display: none; }

/* Desktop */
@media (min-width: 1024px) {
  .nav { display: block; }
}
  • Use relative units (em, rem, %) instead of pixels for greater flexibility.
  • Organize your code: You can write media queries next to the components they reference or separate them in a dedicated file.

🛠️ Useful tools


📚 Conclusion

Media queries are the backbone of modern web design. Knowing their syntax and using them correctly allows you to:

  • Increase site accessibility
  • Improve UX on all devices
  • Create dynamic, fluid, and professional layouts

Learning to design with a responsive approach is no longer an option: it's a standard.



Follow me #techelopment

Official site:www.techelopment.it
facebook:Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment