Interactive Programming Education Platform

Logic Practice

CSS @Media Query

BLUF: Styling is what brings the web to life, and mastering CSS @Media Query is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.

Visual Design Hack: CSS @Media Query

CSS is all about presentation. Discover how CSS @Media Query works to transform plain HTML into a premium user experience in the guide below.

Introduction

By leveraging media queries in CSS, we have the capability to implement diverse styles based on various devices. Media queries enable us to assess factors such as device height, width, resolution, and orientation (Portrait/Landscape) for tailored styling.

The primary objective of the CSS rule is to enhance the webpage's responsiveness in order to provide an optimized layout for various screen dimensions. Through the use of media queries, it is also possible to define specific styles for screen readers.

Syntax:

We can compose the media query using the following syntax.

Example


@media not|only media type and (media feature and|or|not media feature) 
{
    // CSS Property
}

Used Keywords

Below are some keywords that will be used while writing the media queries. These are as follows.

✅ Note: With the help of this keyword, we can revert the entire media query.
✅ Only: With the help of this keyword, we can prevent the old browser from applying the style property.
✅ And: With the help of this keyword, we can combine two media features and media queries.

Media Types

There are different types of media available in the media query. These are as follows.

✅ All: It is the default value for the media type. We can use this for all types of devices.
✅ Print: We can use this for printer devices.
✅ Screen: We can use this for the mobile or computer screen type, etc.
✅ Speech: We can use this for the screen reader, which is used to read the screen.

Media Features

Numerous functionalities are employed within the media query. These include the following.

✅ On hover:

By utilizing this feature, users are able to hover over any given element.

✅ Pointer-events:

With the assistance of this functionality, we can execute a system that is employed for input devices.

✅ Aspect-ratio:

By utilizing this feature, it allows us to establish the proportion between the width and height of the viewport on the screen.

✅ Palette:

By utilizing this feature, it becomes possible to define the color scheme for every element on the output device.

✅ Color-gamut:

With this functionality, users can establish the color component range supported by output devices or user agents.

✅ Color-index:

By utilizing this feature, we are able to specify the quantity of colors visible to the user.

✅ Grid:

By utilizing this feature, we can define the desired amount of rows and columns to showcase on the webpage.

✅ Vertical dimension:

By utilizing this feature, we are able to define the height of the visible area that will appear on the web page.

✅ Hover:

By utilizing this feature, users are able to hover over any given element.

✅ Colors reversed:

With this feature, users can specify the reversed color scheme for any device.

✅ Brightness level:

By utilizing this feature, we have the ability to specify the brightness level of the lights.

✅ max-aspect-ratio:

With this assistance, we have the capability to establish the highest permissible height and width for presenting the viewport within the webpage.

✅ Maximum-color:

With this feature, we have the ability to specify the quantity of bits allocated per color element that will be exhibited on the web page.

✅ maximum-color-index:

By utilizing this feature, we have the ability to set a limit on the total amount of colors that can be shown by output peripherals.

✅ Max-height:

By utilizing this feature, we can establish the upper limit for the visible space within the web browser.

✅ Max-monochrome:

By utilizing this feature, we can establish the highest possible number of bits per color on monochromatic devices.

✅ Maximum Resolution:

With this feature, users can define the highest resolution that will appear on output devices.

✅ Max-width:

By utilizing this feature, we can establish the maximum width for the browser's viewing area.

✅ min-aspect-ratio:

With this assistance, we have the capability to establish the minimum height and width required to display the viewport on a webpage.

✅ Min-color:

By utilizing this, we can establish the minimum bit depth per color channel that will be showcased on the website.

✅ min-color-index:

With this feature, we have the ability to specify the minimum range of colors that output devices are capable of showing.

✅ Min-height:

By utilizing this feature, we can establish the minimum height for the viewport of the web browser.

✅ Min-resolution:

With this feature, we have the ability to define the smallest resolution that should appear on output devices.

✅ Min-width:

By utilizing this feature, we have the ability to establish the minimum width for the viewing area of the web browser.

✅ Monochrome:

With this feature, we can specify the number of bits to showcase on monochromatic screens.

✅ Orientation:

With this feature, we are able to specify the orientation in which the viewport will be shown, whether it is landscape or portrait.

✅ Overflow-block:

With this feature, we can manage the scenario where the content exceeds the visible area.

✅ Overflow-inline:

With this technique, we can manage situations where the inline-axis content exceeds the viewport,

✅ :

With this functionality, we can establish the main input system for a pointing device.

✅ Resolution:

By utilizing this method, we can establish the resolution for the devices using either dpi or PCM.

✅ Scan:

With this tool, we can initiate the scanning procedure for the devices.

✅ Update:

With this method, we can update the output peripherals.

✅ Dimension:

By utilizing this feature, we are able to define the width of the viewport.

Example:

Example


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body {
  margin: 0;
  padding: 0;
}

.content {
  padding: 20px;
  text-align: center;
  color: #fff; /* Default text color */
}

/* Media query for screens larger than 768 pixels */
@media screen and (min-width: 769px) {
  body {
    background-color: #3498db; /* Blue background for larger screens */
  }

  .content {
    background-color: #2980b9; /* Blue background for larger screens */
  }
}

/* Media query for screens smaller than or equal to 768 pixels */
@media screen and (max-width: 768px) {
  body {
    background-color: #e74c3c; /* Red background for smaller screens */
  }

  .content {
    background-color: #c0392b; /* Red background for smaller screens */
  }
}

 </style>
</head>

 <body>
  <div class="content">
    <h1>Hello, Media Query Example!</h1>
    <p>This is an example of how to use @media rules to apply different styles based on screen size.</p>
  </div>

</body>
</html>

Output:

When the screen resolution exceeds 764 pixels, the webpage will appear as depicted below.

When the screen size is smaller than 764 pixels, the webpage appears as follows.