html

CSS @media Rule | Explained

When designing a responsive website, the web developer wishes to alter the structure of the web layout  based on the device using it. CSS allows its users to perform this task by using the @media rule that makes use of media queries to change the appearance of a website corresponding to the device type. In order to understand what this rule is, read the following post. The subjects highlighted in the post are as follows.

  1. @media Rule
  2. Syntax of @media Rule
  3. Types of CSS Media
  4. Types of Media Features

@media Rule

For the purpose of altering the appearance of a web page based on the device, or media that displays it, the @media rule is used. This rule makes use of the media queries to perform the aforementioned task. This rule proves to be of great use when developing a responsive website.

Syntax of @media Rule

It has the following syntax.

@media not|only media type and (media feature and|or|not media feature)
{
   //Code;
}

Keywords explained

not: It reverses the semantics of a media query.

only: It prevents the old versions of a browser from implementing the media query.

and: It combines a media type with a certain media feature.

Types CSS Media

There are a total of four media types which we have provided below.

all

It is applicable for all sorts of media devices.

print

This query is specifically used for printers.

screen

It is used for screens of various device types such as computers, laptops, mobile phones, etc.

speech

This query is particularly used for screen readers.

Types of Media Features

We have described some of the media features here.

1. any-hover

This feature was included in Media Queries Level 4 and specifies that if any given input mechanism lets the user hover over the elements.

2. any-pointer

This was also included in Media Queries Level 4 and states that if any given input mechanism is a pointing device and if so, then how precise is it?

3. aspect-ratio

This feature defines the ratio of the viewport width and its height.

4. color

This feature specifies the components of colors of the output devices.

5. color-gamut

This defines the range of colors that will be supported by output devices.

6. color-index

It states the number of colors a given device can display.

7. grid

The size of columns and rows is specified by the grid feature.

8. height

This defines the height of the viewport.

9. hover

To allow users to hover over HTML elements the hover feature is used.

10. inverted-colors

This specifies whether or not the output device inverts colors.

11. light-level

As the name suggests, it defines the level of light.

12.max-aspect-ratio

The maximum ratio of width and height is specified by this feature.

13. max-color

The most number of bits per color units of the output devices are stated by this feature.

14. max-color-index

This feature states the maximum colors a device can display.

15. max-height

This feature defines the maximum height of the browser.

16. max-monochrome

The most number of bits per color units of a monochrome tool is stated by this feature.

17. min-resolution

The minimum resolution of the output device is specified by the min-resolution feature.

18. min-width

This feature defines the minimum width of the browser.

19. monochrome

This feature states the maximum number of bits per color component of a monochrome device.

20. orientation

It defines whether the orientation of the viewport is portrait or landscape.

21. overflow-block

It handles the scenarios where the content of the web page overflows the viewport.

22. overflow-inline

It handles the scenarios where the content of the web page overflows the viewport across the inline axis be scrolled.

23. pointer

A fundamental input mechanism for pointing devices.

24. resolution

It states the resolution of the device (in dpi or dpcm)

25. scan

It scans the output devices.

26. scripting

It checks whether any scripting such as JavaScript is available or not.

27. update

It updates the output devices quickly.

28. width

The viewport width is defined by this feature.

Below we have presented you with an example so that you can understand the @media rule in a better way.

Example

The example below demonstrates the @media rule.

HTML

<h1>CSS @media Rule</h1>
<p>For the purpose of altering the appearance of a web page based on the device, or media that displays it, the @media rule is used. This rule makes use of the media queries to perform the aforementioned task. This rule proves to be of great use when developing a responsive website. </p>

Here we have defined two elements which are <h1> and <p>. We will apply some media rules on these elements.

CSS

h1, p {
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  font-style: normal;
}
@media screen and (min-width: 720px) {
  p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 25px;
    font-style: italic;
  }
 }

In the above code, we have specified that both the heading and the paragraph will have Verdana font family, a font size of 25px, and an italic font style if the minimum screen width of the device is 720px or wider. However, if the screen width is less than 720px then the font family will be Times New Roman, font size 16px, and font style normal.

Output

When the screen width is 720px or wider.

When the screen width is less than 720px.

The @media rule was implemented successfully.

Conclusion

The @media rule is used to alter the appearance of a web page based on the device, or media that displays it. The syntax of the rule states that the media type should be defined along with certain media features and make use of some operators. Moreover, there are four types which are; all, screen, print, and speech. Furthermore, there are plenty of media features such as, width, monochrome, height, overflow-block, etc. This post deeply explains the @media rule, along with its syntax, media types, and media features.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.