CSS3 Media Queries Tutorial With Examples

In this article, we will learn CSS3 Media queries tutorial with examples. We will learn by doing lots of code examples.

CSS3 media queries are a powerful tool that allows developers to create responsive web designs that adapt to different devices and screen sizes. In essence, css3 media queries are a way to apply different styles to an HTML document depending on certain characteristics of the user’s device, such as screen size, orientation, resolution, and more.

CSS3 Media queries are used in CSS to apply different styles to a document based on the characteristics of the device on which it is being viewed.

To use css3 media queries, you need to define the media query using the @media rule, followed by one or more media features and their corresponding values.

The basic syntax of a media query involves specifying a media type (such as screen or print), followed by one or more media features, which represent characteristics of the user’s device. Media features can be either boolean (true or false) or have a range of possible values.

For example, the following css3 media query targets screens with a maximum width of 768 pixels:

@media screen and (max-width: 768px) {
  /* Styles for small screens */
}

What are CSS3 Media Queries?

CSS3 Media queries are a feature in CSS (Cascading Style Sheets) that allow developers to apply different styles to an HTML document based on certain characteristics of the user’s device, such as screen size, orientation, resolution, and more.

CSS3 Media queries enable responsive web design by allowing developers to specify different CSS rules for different devices, ensuring that the website or application looks and functions well on any device.

CSS3 Media queries consist of a media type and one or more media features. The media type specifies the type of device the media query is targeting, such as screen, print, or speech.

Media features represent specific characteristics of the device, such as width, height, aspect ratio, orientation, and more. Media features can have different values, such as minimum or maximum values, ranges, or boolean (true or false) values.

Why use CSS3 Media Queries?

CSS3 Media queries are important for web developers to use for several reasons:

1. Better user experience: With media queries, developers can create websites that adapt to different screen sizes and resolutions, ensuring that visitors have a consistent and optimized experience, no matter what device they’re using.
2. Increased accessibility: By using media queries to create responsive designs, developers can ensure that their websites are accessible to as many users as possible, including those with different devices, screen sizes, and accessibility needs.
3. Improved search engine optimization: Responsive designs created with media queries can help improve a website’s search engine rankings, as search engines tend to favor websites that are mobile-friendly and provide a good user experience.
4. Reduced development time and costs: By using media queries to create a single design that works across multiple devices, developers can save time and resources that would have been spent creating multiple versions of a website.

Media type

CSS3 Media Features

CSS3 media features are properties that are used in media queries to define specific characteristics of the user’s device, such as screen size, orientation, resolution, and more.

CSS3 Media features can be used to specify different styles for different devices, ensuring that a website or application looks and functions well on any device.

Media features can have different values, such as minimum or maximum values, ranges, or boolean (true or false) values. The most commonly used media features include:

1. Width and Height: These media features allow developers to specify styles based on the width and height of the user’s device screen. For example, a media query that targets devices with a maximum width of 768 pixels would look like this:

@media screen and (max-width: 768px) {
  /* Styles for small screens */
}

2. Orientation: This media feature allows developers to specify styles based on the orientation of the device screen, either portrait or landscape. For example, a media query that targets landscape screens would look like this:

@media screen and (orientation: landscape) {
  /* Styles for landscape screens */
}

3. Resolution: This media feature allows developers to specify styles based on the resolution of the user’s device screen. For example, a media query that targets devices with a minimum resolution of 300 DPI would look like this:

@media screen and (min-resolution: 300dpi) {
  /* Styles for high-resolution screens */
}

4. Aspect ratio: This media feature allows developers to specify styles based on the aspect ratio of the device screen. For example, a media query that targets devices with an aspect ratio of 16:9 would look like this:

@media screen and (aspect-ratio: 16/9) {
  /* Styles for devices with a 16:9 aspect ratio */
}

Logical operators

Logical operators can be used in media queries to combine multiple media features and create more specific targeting. The most commonly used logical operators in media queries are and, not, and only.

1. and: The and the operator is used to combine multiple media features, ensuring that all of the features are true in order for the media query to be applied. For example, a media query that targets devices with a maximum width of 768 pixels and a minimum resolution of 300 DPI would look like this:
   

@media screen and (max-width: 768px) and (min-resolution: 300dpi) {
  /* Styles for small screens with high resolution */
}

2. not: The not the operator is used to negate a media feature, applying the styles when the feature is false. For example, a media query that targets all devices except those with a maximum width of 768 pixels would look like this:

@media not screen and (max-width: 768px) {
  /* Styles for all screens except small screens */
}

3. only: The only the operator is used to ensure that the media query is only applied if the specified media feature is true, and to ignore the media query if the feature is false. This is useful for ensuring that older browsers that don’t support media queries don’t apply the styles. For example, a media query that targets devices with a maximum width of 768 pixels would look like this:

@media only screen and (max-width: 768px) {
  /* Styles for small screens */
}

Standard CSS3 Media Queries for Different Devices

Here are some examples of CSS3 media queries for different devices:

Smartphones

This media query applies styles to screens with a maximum width of 480 pixels, which is typically the width of a smartphone screen.

@media screen and (max-width: 480px) {
  /* Styles for smartphones */
}

Tablets

This media query applies styles to screens with a minimum width of 481 pixels and a maximum width of 1024 pixels, which is typically the width of a tablet screen.

@media screen and (min-width: 481px) and (max-width: 1024px) {
  /* Styles for tablets */
}

Laptops and Desktops

This media query applies styles to screens with a minimum width of 1025 pixels, which is typically the width of a laptop or desktop screen.

@media screen and (min-width: 1025px) {
  /* Styles for laptops and desktops */
}

High-Resolution Devices

This media query applies styles to high-resolution devices, such as devices with a pixel ratio of 2 or higher or devices with a minimum resolution of 192dpi.

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  /* Styles for high-resolution devices */
}

Printers

This media query applies styles specifically for printing, allowing you to optimize the appearance of your content when it is printed.

@media print {
  /* Styles for printers */
}

CSS Media Touch and pointer capabilities

Media queries for touch and pointer are used to target devices that use touchscreens or pointers (such as a mouse) for input. Here are some examples:

Targeting touchscreens

This media query targets devices with “coarse” pointer inputs, such as touchscreens. You can use this query to adjust styles for touch interactions, such as increasing button sizes or changing the layout for touch-friendly navigation.

@media (pointer: coarse) {
  /* Styles for touchscreens */
}

Targeting devices with fine pointer inputs:

This media query targets devices with “fine” pointer inputs, such as a mouse or a stylus. You can use this query to adjust styles for devices that use precise input methods, such as reducing the size of buttons or increasing the font size for readability.

@media (pointer: fine) {
  /* Styles for devices with fine pointer inputs */
}

Combining touch and pointer:

This media query targets devices that have both touch input and coarse pointer input. By combining the “hover: none” feature, you can ensure that styles intended for touch input are not inadvertently applied to devices with fine pointer inputs.

@media (hover: none) and (pointer: coarse) {
  /* Styles for touchscreens */
}

Dynamic media queries with JavaScript

Dynamic media queries with JavaScript allow you to create responsive designs that adapt to changes in the viewport or device characteristics at runtime.

Dynamic media queries with JavaScript can be a powerful tool for creating responsive designs that adapt to a wide range of device types and screen sizes.

By combining JavaScript with CSS media queries, you can create layouts that are flexible and customizable, providing the best possible user experience on any device.

Here’s an example:

const mq = window.matchMedia("(max-width: 767px)");

function handleMobileChange(e) {
  if (e.matches) {
    // Change to mobile layout
  } else {
    // Change to desktop layout
  }
}

mq.addListener(handleMobileChange);
handleMobileChange(mq);

In this example, we’re using the matchMedia method to create a media query that targets screens with a maximum width of 767 pixels. We’re then using the addListener method to attach an event listener to the media query, which will trigger the handleMobileChange function whenever the viewport size changes.

The handleMobileChange the function checks whether the media query matches the current viewport size, and adjusts the layout accordingly. You can use this method to create more complex layouts that adapt to changes in the viewport size or other device characteristics, such as orientation or screen resolution.

Using responsive images with CSS3 media queries

Responsive images are a key component of any responsive web design, allowing you to serve optimized images to different devices based on their screen size and resolution.

CSS3 Media queries can be used to ensure that the appropriate image is loaded for each device.

Here’s an example:

<picture>
  <source media="(max-width: 768px)" srcset="small.jpg">
  <source media="(min-width: 769px)" srcset="large.jpg">
  <img src="fallback.jpg" alt="Responsive image">
</picture>

In conclusion, CSS3 media queries are a powerful tool for creating responsive designs that adapt to different devices and screen sizes.

By using CSS3 media queries, you can ensure that your website or application looks great and performs well on a wide range of devices, from mobile phones to large desktop displays.

With the examples and techniques covered in this article, you should have a solid understanding of how to use media queries to create responsive layouts, adjust typography and spacing, and optimize images for different screen sizes.

By incorporating css3 media queries into your design process, you can create websites and applications that are flexible, accessible, and user-friendly, providing the best possible experience for your users.