CSS

CSS Media Queries are a powerful feature of CSS that allows you to apply different styles to an element depending on the conditions like viewport width, height, resolution, or device type. Media queries enable responsive design by making your website or web application adjust its layout and appearance based on the characteristics of the device it is being viewed on.

🔹 Syntax of Media Queries

A media query consists of a media type (like screen, print, etc.) and one or more expressions that check the device’s properties (like width, height, resolution, etc.).

@media media_type and (condition) {
  /* CSS styles */
}

Example:

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

In this example, the background-color of the body will change to lightblue when the viewport width is 600px or smaller.

🔹 Media Types

Media queries can target different media types based on the output device. The most common media types are:

• screen: Used for computer screens, tablets, and smartphones.
• print: Used when printing a document or when viewing it in print preview.
• all: A combination of all media types (default value).
• speech: Used for screen readers.

Example:

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

This rule will apply only when the document is printed.

---

🔹 Common Media Features

Media queries allow you to test a variety of conditions, which are often referred to as media features. The most commonly used media features are:

• width and height: These are used to target the width and height of the viewport or device screen.
• max-width and min-width: These help target specific ranges of width.
• max-height and min-height: These help target specific ranges of height.
• orientation: Can check if the device is in portrait or landscape mode.
• resolution: Targets different screen resolutions (useful for high-density screens like Retina displays).
• aspect-ratio: Specifies the aspect ratio (width divided by height) of the viewport.

Example:

@media (min-width: 768px) {
  body {
    background-color: lightgreen;
  }
}

This rule will apply the background-color change when the viewport is 768px wide or larger.

---

🔹 Combining Multiple Conditions

You can combine multiple conditions using logical operators like and, or, and not. These allow more complex queries for targeting specific devices.

Example:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightyellow;
  }
}

In this example, the background-color will change to lightyellow when the viewport is between 768px and 1024px wide.

Using not:

@media not all and (max-width: 768px) {
  /* Styles for devices larger than 768px */
}

Using or:

@media (max-width: 768px), (max-width: 480px) {
  /* Styles for devices that are 768px or 480px wide */
}

---

🔹 Responsive Design with Media Queries

One of the primary use cases for media queries is responsive design, where the design of a website adjusts to fit various screen sizes, like on smartphones, tablets, and desktops.

Example of a Responsive Design:

/* Default Styles */
body {
  font-size: 16px;
  background-color: white;
}

/* For tablets and smaller screens (max-width: 768px) */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    background-color: lightblue;
  }
}

/* For mobile devices (max-width: 480px) */
@media (max-width: 480px) {
  body {
    font-size: 12px;
    background-color: lightcoral;
  }
}

In this example:

• On screens larger than 768px (like desktops), the default styles are applied.
• On devices with a width of 768px or smaller (tablets), the font size is reduced and the background changes to lightblue.
• On devices with a width of 480px or smaller (mobile phones), the font size is further reduced and the background changes to lightcoral.

---

🔹 Orientation Media Feature

The orientation media feature allows you to target devices based on their orientation—whether they are in portrait or landscape mode.

Example:

/* Portrait Mode */
@media (orientation: portrait) {
  body {
    font-size: 18px;
  }
}

/* Landscape Mode */
@media (orientation: landscape) {
  body {
    font-size: 20px;
  }
}

This is useful for mobile devices that can switch between portrait and landscape mode.

---

🔹 Using Media Queries for Font Size Adjustments

Media queries are also helpful for adjusting the font size for different screen sizes, which is critical for making text readable on mobile devices.

Example:

/* Default Font Size */
body {
  font-size: 16px;
}

/* On smaller screens (max-width: 600px) */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* On larger screens (min-width: 1200px) */
@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

This will adjust the font size depending on the screen width, ensuring the text is legible on all devices.

---

🔹 The @media Rule for Multiple Conditions

You can combine several media queries in a single CSS file to target various screen sizes, orientations, and resolutions.

Example:

/* For devices with a width of at least 600px */
@media (min-width: 600px) {
  .container {
    width: 80%;
  }
}

/* For devices with a width between 600px and 1000px */
@media (min-width: 600px) and (max-width: 1000px) {
  .container {
    width: 70%;
  }
}

/* For devices with a width larger than 1000px */
@media (min-width: 1000px) {
  .container {
    width: 60%;
  }
}

---

🔹 Media Queries for Print

You can also apply media queries for printing purposes, ensuring that the content is styled properly when a document is printed.

Example:

/* Styles for print */
@media print {
  body {
    font-size: 12pt;
  }

  .no-print {
    display: none;
  }
}

This will make sure that when printing the document, the font size is set to 12pt, and any elements with the class .no-print are hidden.

---

🔹 Summary

• CSS Media Queries are used to apply different styles depending on the device’s characteristics such as screen width, height, resolution, orientation, etc.
• The most common media features include width, height, resolution, orientation, and aspect-ratio.
• Media queries allow for responsive design, ensuring that a website adjusts its layout to different screen sizes (e.g., mobile, tablet, desktop).
• You can combine multiple conditions and use logical operators (and, or, not) to create more complex queries.
• Best practice: Use box-sizing: border-box and other responsive design techniques along with media queries to ensure consistent layouts across all screen sizes.

By leveraging media queries effectively, you can create flexible, mobile-friendly designs that provide a seamless user experience across a wide range of devices.