Media Queries

• Syntax of media queries
• Breakpoints and responsive design
• Using media queries for different devices

Detailed Explanation of Media Queries

Syntax of 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 (media-type) and (media-feature) {
  /* CSS rules here */
}

• Media Type: Specifies the type of device (e.g., screen, print, all). If omitted, the media query applies to all media types.
• Media Feature: Specifies the characteristic of the device (e.g., width, height, orientation).

Example:

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

Breakpoints and Responsive Design

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:

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

Example:

/* 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;
  }
}

Using Media Queries for Different 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. Here’s how to use media queries for various devices:

1. Mobile Devices

Portrait Orientation:

@media screen and (max-width: 599px) and (orientation: portrait) {
  /* Styles for portrait-oriented phones */
  .navbar {
    display: none;
  }
}

Landscape Orientation:

@media screen and (max-width: 599px) and (orientation: landscape) {
  /* Styles for landscape-oriented phones */
  .navbar {
    display: block;
  }
}

2. Tablets

Portrait Orientation:

@media screen and (min-width: 600px) and (max-width: 767px) and (orientation: portrait) {
  /* Styles for portrait-oriented tablets */
  .sidebar {
    display: none;
  }
}

Landscape Orientation:

@media screen and (min-width: 600px) and (max-width: 767px) and (orientation: landscape) {
  /* Styles for landscape-oriented tablets */
  .sidebar {
    display: block;
  }
}

3. Desktops

General Desktop Styles:

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

4. High-Resolution Devices (Retina Displays)

High DPI Screens:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Styles for high-resolution screens */
  .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.

Example:

/* 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;
  }
}

Using not and only:

• not: Negates the media query.
• only: Applies the styles only if the entire query matches.

Example:

/* 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;
  }
}

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

In summary, media queries are a powerful tool for creating responsive web designs. They allow you to apply specific styles based on device characteristics, ensuring that your website provides an optimal experience across a wide range of devices. By understanding the syntax, breakpoints, and usage for different devices, you can create flexible and adaptive layouts that improve user experience.