Media Queries

Media queries are a CSS3 feature that allows you to apply styles based on the characteristics of the user’s device, such as the width, height, orientation, and resolution of the device’s screen.

Basic Syntax

Media query syntax includes options to specify media type and media feature. Media type specifies the type of device (e.g., screen, print, all) if omitted, the media query applies to all media types. media Feature helps to specify the characteristic of the device (e.g., width, height, orientation).

Basic syntax is as follows

@media (media-type) and (media-feature) {
}

Real world example

/* Apply styles only if the viewport width is 600px or wider */
@media screen and (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Breakpoints

Breakpoints are specific values that define points at which the layout of a website changes to accommodate different screen sizes. They are used to create responsive designs that provide an optimal viewing experience across a wide range of devices.

Common Breakpoints:

1. Extra Small Devices (phones) - max-width: 599px
2. Small Devices (tablets) - min-width: 600px and max-width: 767px
3. Medium Devices (small laptops) - min-width: 768px and max-width: 991px
4. Large Devices (desktops) - min-width: 992px and max-width: 1199px
5. Extra Large Devices (large desktops) - min-width: 1200px

Example usage

/* Extra Small Devices (phones, less than 600px) */
@media (max-width: 599px) {
  .container {
    padding: 10px;
  }
}

/* Small Devices (tablets, 600px and up) */
@media (min-width: 600px) and (max-width: 767px) {
  .container {
    padding: 20px;
  }
}

/* Medium Devices (small laptops, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
  .container {
    padding: 30px;
  }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    padding: 40px;
  }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    padding: 50px;
  }
}

Media Queries for Devices

Media queries allow you to tailor your website’s layout and design to different devices, ensuring a better user experience regardless of the screen size or orientation.

Mobile Devices

Portrait Orientation

By specifying orientation to be portrait and combining with the size of the screen we can target users with a mobile device in portrait mode.

@media screen and (max-width: 599px) and (orientation: portrait) {
  .navbar {
    display: none;
  }
}

Landscape Orientation

By specifying orientation to be landscape and combining with the size of the screen we can target users with a mobile device in landscape mode.

@media screen and (max-width: 599px) and (orientation: landscape) {
  .navbar {
    display: block;
  }
}

Tablets

Portrait Orientation

By specifying orientation to be portrait and combining with the size of the screen we can target users with a tablet device in portrait mode.

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

Landscape Orientation

By specifying orientation to be landscape and combining with the size of the screen we can target users with a tablet device in landscape mode.

@media screen and (min-width: 600px) and (max-width: 767px) and (orientation: landscape) {
  .sidebar {
    display: block;
  }
}

Desktops

General Desktop Styles

@media screen and (min-width: 992px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

High-Resolution Devices

High DPI Screens

Using a combination of (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) you can target high DPI screens like retina screens as follows.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    background-image: url("logo@2x.png");
    background-size: contain;
  }
}

Combining Media Queries

You can combine multiple media queries using commas, which acts as an OR operator, or use multiple conditions within a single media query using and.

/* Apply styles if the device is either a phone or a tablet in portrait mode */
@media (max-width: 599px),
  (min-width: 600px) and (max-width: 767px) and (orientation: portrait) {
  .container {
    padding: 10px;
  }
}

not and only

not can be used to negate the media query.

The below example only works if the device is not a screen or its width is less than 600px

@media not screen and (min-width: 600px) {
  .container {
    padding: 10px;
  }
}

only applies the styles only if the entire query matches users device type, size and resolution.

/* Apply styles only if the device is a screen and its width is 600px or wider */
@media only screen and (min-width: 600px) {
  .container {
    padding: 20px;
  }
}