Complete Guide to Media Queries in CSS

Media queries are a powerful tool in web development that allow you to apply different styles to your webpage based on various factors, such as screen size, resolution, or device orientation. The purpose of this tutorial is to guide you through the basics of media queries, providing clear explanations and code examples.

1. What are Media Queries?

CSS rules known as media queries apply styles depending on certain conditions. They are commonly used to create responsive designs that adapt to different devices and screen sizes. Here's how a media query looks like:

@media screen and (max-width: 600px) {
/* Styles to apply when the screen width is 600 pixels or less */
}

Here, @media indicates the start of a media query, 'screen' specifies the type of media (screen, print, etc.), and (max-width: 600px) is the condition. In this example, the styles inside the curly braces will only apply when the screen width is 600 pixels or less.

2. Basic Media Query Examples

1. Adjusting Font Size for Small Screens

/* Default styles for all screens */
p {
font-size: 16px;
}

/* Media query for screens 600 pixels or less */
@media screen and (max-width: 600px) {
p {
font-size: 14px;
}
}

This example reduces the font size of paragraphs on screens with a width of 600 pixels or less.

2. Hiding Elements on Small Screens

/* Default styles for all screens */
.sidebar {
display: block;
}

/* Media query for screens 800 pixels or less */
@media screen and (max-width: 800px) {
.sidebar {
display: none;
}
}

Here, the sidebar will be hidden on screens with a width of 800 pixels or less.

3. Minimum and Maximum

@media screen and (min-width: 600px) {
/* Your CSS here */
}

Minimum screen size required is 600px.

@media screen and (max-width: 600px) {
/* Your CSS here */
}

Maximum screen size is 600px.

@media screen and (min-width: 600px) and (max-width: 900px) {
/* Your CSS here */
}

Screen size should be between 600px to 900px

4. Combining Media Queries

You can combine multiple media queries to create more complex conditions. For example:

/* Default styles for all screens */
body {
background-color: #f0f0f0;
}

/* Media query for screens between 600px and 1200px */
@media screen and (min-width: 600px) and (max-width: 1200px) {
body {
background-color: #dcdcdc;
}
}

This sets a different background color for screens between 600 and 1200 pixels wide.

5. Responsive Images with Media Queries

/* Default styles for all screens */
img {
max-width: 100%;
height: auto;
}

/* Media query for screens 600 pixels or less */
@media screen and (max-width: 600px) {
img {
width: 100%;
height: auto;
}
}

This ensures that images scale proportionally on smaller screens.

6. Automatic Dark Mode

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

All style within this will be applicable if dark mode is enabled. The main code will be considered as light mode.

Media queries are a crucial aspect of responsive web design, allowing you to tailor your styles to different devices. Experiment with different conditions and adapt your designs to create a seamless user experience across various screen sizes and resolutions.