CSS - Media Queries: A Beginner's Guide

Hello, future web developers! Today, we're diving into the exciting world of CSS Media Queries. As your friendly neighborhood computer teacher, I'm here to guide you through this journey, step by step. Don't worry if you've never coded before – we'll start from the basics and work our way up. So, grab a cup of coffee (or tea, if that's your thing), and let's get started!

CSS - Media Queries

What are Media Queries?

Before we jump into the nitty-gritty, let's understand what media queries are. Imagine you're designing a website that looks great on your computer. But what happens when someone views it on their phone? That's where media queries come in handy! They allow your website to adapt to different screen sizes and devices. It's like having a chameleon website that changes its appearance based on its environment.

Syntax

Now, let's look at the basic syntax of a media query:

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

Don't let this intimidate you! We'll break it down:

@media: This tells the browser, "Hey, I'm about to set some conditions!"
mediatype: This specifies what type of media we're targeting (we'll cover these soon).
and: This is how we combine conditions.
(condition): This is where we set our specific conditions.

Media Types

Media types tell the browser what kind of device we're targeting. Here are the main ones:

Media Type	Description
all	Applies to all devices
print	For printers
screen	For computer screens, tablets, and smartphones

Logical Operators

We can use logical operators to create more complex queries:

Operator	Description
and	Combines multiple media features
not	Negates a media query
only	Applies styles only if the entire query matches
,	Combines multiple media queries

CSS Media Type - All

The all media type is like a Swiss Army knife – it works for all devices. Here's an example:

@media all {
  body {
    background-color: lightblue;
  }
}

This sets the background color to light blue for all devices. Simple, right?

CSS Media Type - Print

The print media type is perfect for styling your web pages when someone wants to print them. Let's see it in action:

@media print {
  body {
    font-size: 12pt;
  }
  .no-print {
    display: none;
  }
}

This increases the font size for better readability and hides elements with the class no-print when printing.

CSS Media Type - Screen

The screen media type is probably the one you'll use most often. It's for any screen-based device. Here's an example:

@media screen and (max-width: 600px) {
  .menu {
    width: 100%;
  }
}

This makes the menu take up the full width of the screen when the screen width is 600 pixels or less.

CSS Media Type - With Comma

We can target multiple media types using commas. It's like inviting multiple friends to a party:

@media screen, print {
  body {
    line-height: 1.5;
  }
}

This sets the line height for both screen and print media types.

CSS Media Type - With Only

The only keyword is like a bouncer at a club. It ensures older browsers that don't support media queries don't apply the styles:

@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
  }
}

CSS Media Queries - Range

We can also specify ranges for our conditions:

@media screen and (min-width: 600px) and (max-width: 900px) {
  .sidebar {
    display: none;
  }
}

This hides the sidebar when the screen width is between 600px and 900px.

Media Features

Media features allow us to test specific characteristics of the user's device or browser. Here are some common ones:

Feature	Description
width	Width of the viewport
height	Height of the viewport
aspect-ratio	Ratio between width and height
orientation	Landscape or portrait
resolution	Pixel density of the device

Creating Complex Media Query

Let's put it all together with a more complex example:

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
  .grid-item {
    width: 50%;
  }
}

This creates a two-column layout for landscape-oriented screens between 600px and 900px wide.

CSS Media Queries - Combining Multiple Types or Features

We can combine multiple types or features using the and operator:

@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
  .content {
    font-size: 14px;
  }
}

This applies the style to screens between 600px and 900px wide, or when printing on paper up to 600px wide.

CSS Media Queries - Testing For Multiple Queries

Sometimes, we want to apply styles if any of several queries are true. We use commas for this:

@media (min-width: 600px), (orientation: landscape) {
  .header {
    position: sticky;
    top: 0;
  }
}

This makes the header sticky if the screen is at least 600px wide or in landscape orientation.

CSS Media Queries - Inverting a Query's Meaning

The not keyword lets us invert the meaning of a query:

@media not all and (orientation: landscape) {
  .sidebar {
    float: left;
  }
}

This floats the sidebar left unless the device is in landscape orientation.

CSS Media Queries - Improving Compatibility With Older Browsers

For older browsers that don't support media queries, we can provide fallback styles:

.container {
  width: 100%; /* Fallback for older browsers */
}

@media screen and (min-width: 600px) {
  .container {
    width: 80%;
  }
}

This ensures a decent layout even on browsers that don't understand media queries.

And there you have it! You've just taken your first steps into the world of responsive web design with CSS Media Queries. Remember, practice makes perfect, so don't be afraid to experiment with these concepts. Happy coding!

Credits: Image by storyset