Skip to main content

Introduction to CSS Media Queries

CSS Media Queries​

CSS Media Queries are used to apply different CSS styles based on the characteristics of the device or browser being used to view a web page. Media queries allow developers to create responsive designs that adjust to the user's screen size, orientation, resolution, and other characteristics.

As an example:

@media (min-width: 768px) {
     body {
          font-size: 20px;
     }
}

In this example:

  • We are using the @media rule to define a media query.
  • The min-width: 768px`media feature expression tests whether the width of the device's screen is at least768px`.
  • If the condition is true, the styles inside the media query will be applied to the body element.
  • In this case, we are setting the font-size of the body element to 20px if the screen width is at least 768px.
  • This would typically be used to create a responsive design that adjusts the font size based on the screen size.

Example​

Here is an example that uses CSS media queries to adjust the styles of a web page based on the width of the screen:

Editor

Loading...

CSS3 Media Types​

CSS3 introduces several media types that allow you to define different styles for different devices or media types.

The following are the most commonly used media types in CSS3:

The screen​

This is the default media type and applies to devices with a screen such as desktops, laptops, tablets, and smartphones.

As an example:

@media screen {
     body {
          background-color: #f1f1f1;
     }
}

In this example:

  • The background color of the body element is set to a light gray color when the device has a screen.

The print​

This media type applies to printers and print preview modes. You can use it to define styles that are optimized for printing, such as removing backgrounds, adjusting font sizes, and removing unnecessary elements.

As an example:

@media print {
     body {
          background-color: white;
          font-size: 12pt;
     }
}

In this example:

  • The background color of the body element is set to white and the font size is set to 12pt when the page is being printed.

The handheld​

This media type applies to handheld devices such as mobile phones and PDAs. You can use it to define styles that are optimized for small screens and touch input.

As an example:

@media handheld {
     body {
          background-color: #f1f1f1;
          font-size: 14px;
     }
}

In this example:

  • The background color of the body element is set to a light gray color and the font size is set to 14px when the device is a handheld device such as a mobile phone.

The all​

This media type applies to all devices.

As an example:

@media all {
     body {
          font-family: Arial, sans-serif;
     }
}

In this example:

  • The font family of the body element is set to Arial or a sans-serif font on all devices.

The speech​

This media type applies to speech synthesizers and screen readers. You can use it to define styles that are optimized for these devices, such as removing visual cues and using large fonts.

As an example:

@media speech {
     h1 {
          display: none;
     }
}

In this example:

  • The h1 element is hidden when the device is a speech synthesizer or screen reader.

The tv​

This media type applies to televisions and similar devices.

As an example:

@media tv {
     body {
          background-color: black;
          color: white;
     }
}

In this example:

  • The background color of the body element is set to black and the text color is set to white when the device is a television or similar device.