Media Queries of CSS & HTML (In Depth) 2020

Media queries is a CSS trick to make the website fully responsive for all devices like mobile and tablets. Actually, it adds the conditional CSS styles to the web page and apply style when certain condition is true.

Media query help us to organize the special look for different screen sizes, orientations (Landscape or Portrait) and even for printer also.

Let’s understand more deeply,

By the way, this is the 4^th version of media query.

Basic Example:

@media only screen and (max-width: 768px) {
 	// apply CSS if media type is SCREEN and width < = 768px;
}

Syntax:

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
	// CSS style goes here
  	// CSS style will apply when condition is true 
}

Key elements of media query:

1. Media type
2. Media features
3. Logical operators

Note:  queries are case-insensitive and if query contain UNKOWN media type it will be false by default.

Media types:

1.	All	Default, match with all devices
2.	Print	It used to style print preview of the page.
3.	Screen	It used for device screens like computer, tablet, mobile etc.
4.	Speech	It is suitable for screen readers.

Media features:

1.	any-hover	Does any available input mechanism allow the user to hover over elements?
2.	any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it?
3.	aspect-ratio	Width-to-height aspect ratio of the viewport
4.	color	Number of bits per color component of the output device, or zero if the device isn’t color
5.	color-gamut	Approximate range of colors that are supported by the user agent and output device
6.	color-index	Number of entries in the output device’s color lookup table, or zero if the device does not use such a table
7.	display-mode	The display mode of the application, as specified in the web app manifest’s display member
8.	forced-colors	Detect whether user agent restricts color palette
9.	grid	Does the device use a grid or bitmap screen?
10.	height	Height of the viewport
11.	hover	Does the primary input mechanism allow the user to hover over elements?
12.	inverted-colors	Is the user agent or underlying OS inverting colors?
13.	light-level	Light level of the environment
14.	monochrome	Bits per pixel in the output device’s monochrome frame buffer, or zero if the device isn’t monochrome
15.	Orientation	Orientation of the viewport
16.	overflow-block	How does the output device handle content that overflows the viewport along the block axis?
17.	overflow-inline	Can content that overflows the viewport along the inline axis be scrolled?
18.	pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it?
19.	prefers-color-scheme	Detect if the user prefers a light or dark color scheme
20.	prefers-contrast	Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors
21	prefers-reduced-motion	The user prefers less motion on the page
22	prefers-reduced-transparency	The user prefers reduced transparency
23	resolution	Pixel density of the output device
24	scan	Scanning process of the output device
25	scripting	Detects whether scripting (i.e. JavaScript) is available
26	update	How frequently the output device can modify the appearance of content
27	width	Width of the viewport including width of scrollbar

Logical operators:

1.	Only	It is basically used for old browsers that do not support media type with media feature. Like old browser can interpret screen and (min-width: 768px) as the screen only and apply to all screens, to avoid this we have to use the Only operator. It has no effect on a modern browser.   Note: We must specify media type with the Only operator.
2.	And	This operator is used to create the chain of multiple media features together where all conditions should be satisfied to apply the specified style.
3.	Not	This operator used to apply the style when the media query becomes oppose. It basically reverses the condition of the media query. Note: We must specify media type with Not operator.
4.	, (comma)	It is used to separate the queries in a single media query. That means different queries with the same style can use this operator to combine into a single rule. It basically works like OR operator. When a single query becomes true, the style will be applied.

How to use? Examples:

We can link different stylesheets for different screen sizes with media attribute like below,

<link rel="stylesheet" media="screen and (max-width: 1200px)" href="style-lg.css">

Example of media Type:

@media screen {
     #navbar {
      Display: block; 
    }
}

@media print {
    #navbar {
	Display: none;
    }
}

Above media query which uses the print media type, will apply when user open the print preview of web page. And screen media type will apply default to the web page.

Example of media features with operators:

@media screen and (max-width: 768px) {
    .sidemenu {
	Display: none;
    }
}

Above media query will apply to the devices with max screen size 768px or less.

Example of Orientation (media feature):

@media only screen and (orientation: landscape) {
  	.sidemenu {
		Display: block;
	}
}

Example of comma separated operator:

@media screen and (min-width: 992px), (min-width: 1200px) {
	#navbar, .sidemenu {
	Display: block;
	}
}

Above media query will apply when the device is at least 992px in size or wider than this. Because we have used the comma operator here. So, it will also apply the style when min-width of the screen is 1200px or wider.

Learn more about CSS.

Do we need media query for each screen size?

Nope, we can’t create, I mean we shouldn’t create the media breakpoints for all devices,

Why?

Because of consistent change in the devices, every day new device comes and old fade-out that means we have to manage all new sizes along with old one.

Let’s make it easy,

We should create breakpoints from where the screen start looks bad and need to make some designs with a range of sizes that can cover a wide range of screen sizes with a single design.

For real-time testing of media query checkout this website CSSMediaQueries

We must know about the standard sizes of the devices that can cover all size. So, to know about breakpoints, read here, at WebsiteDimentions.

If you find this article useful, please comment and share it with your friends.