Introduction

CSS media queries are a fundamental aspect of responsive web design, enabling you to tailor your website's appearance for different devices and screen sizes. CSS media queries empower you to create dynamic and adaptive web pages that display optimally on various devices. Let's delve into the core concepts and practical implementations of CSS media queries.

The viewport is the visible area of a web page within a browser window. It is the area where the content of the web page is displayed to the user. CSS media queries work by targeting the viewport and applying different styles based on its characteristics. Here's a simple example of how to define the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

To implement CSS media queries, you use the `@media` rule within your CSS stylesheets. The `@media` rule allows you to specify conditions that trigger the application of specific styles.

@media (max-width: 768px) { 
  /* Styles for screens smaller than 768px */ 
  body { 
    font-size: 14px; 
  } 
}

In this example, the styles within the `@media` rule will be applied only when the screen width is less than or equal to 768 pixels.

The core syntax of a media query rule is as follows:

@media (media condition) { 
  /* Styles to be applied */ 
}

The `media condition` is where you specify the criteria that trigger the styles within the curly braces.

Media types are used to specify the target device or medium. Common media types include:

• all: Applies to all media types.
• screen: Applies to computer screens.
• print: Applies to printing.
• speech: Applies to screen readers or speech synthesizers.

You can use media types in combination with other media conditions.

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

Media queries can also target screen resolution using the `min-resolution` and `max-resolution` properties.

@media (min-resolution: 2dppx) { 
  /* Styles for high-resolution screens */ 
}

Media queries support various conditions to target different scenarios. These conditions are often combined to create more specific rules.

• min-width:  Applies styles when the viewport width is greater than or equal to the specified value.
• max-width:  Applies styles when the viewport width is less than or equal to the specified value.
• min-height:  Applies styles when the viewport height is greater than or equal to the specified value.
• max-height: Applies styles when the viewport height is less than or equal to the specified value.

You can combine these conditions using the `and` and `or` operators.

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

Media queries can also target the device orientation using the `orientation` property.

@media (orientation: portrait) { 
  /* Styles for portrait mode */ 
}

The `portrait` value targets devices with a vertical orientation, while `landscape` targets devices with a horizontal orientation.