CSS Media Queries

Suppose, you want to display a particular layout on desktop and a different layout on Mobile devices, then you can use Media Queries to achieve this.

Not only this, there are a lot of instances when you can use Media Queries and we are going to cover most of them.

What is Media Query

Media query was introduced as part of CSS3. This is also recommended by W3C.

This is a way to include different styles based on the characteristic of the device along with the device type. The characteristics(properties) of the devices can be like –

Resolution of the device
Size of the device like device-width or device-height
Size of the viewport like width or height property
aspect-ratio of viewport
orientation of the viewport

CSS @media query

CSS2 already introduced @media query earlier to apply different styles based on different media device-types.

But, this @media rule did not work well as different devices were not prepared to support it properly. Hence in CSS3, it was modified to apply the styles based on the characteristics(properties) of the device, not only the device type.

Recognized Media types

All the below media types are case sensitive so you should be careful while using them

Most used media types	Purpose
*all*	Use this for all devices.
*print*	for only printers for the print documents and paged documents.
*screen*	Use this for Color computer monitor screens
*speech*	for Screen synthesizers like Screen readers

Less used media types	Purpose
braille	Use this for braille tactile feedback printers.
embossed	for paged braille printers
handheld	For smaller devices which can be easily held by hand
projection	Use this for Projection like Projectors
tty	for media using fixed-pitch character grid like teletypes, terminals etc
tv	for Television types with low resolution and colors

Important Media characteristics or features

There are lots of media features and some of them are even added as part of Media Queries Level 4.

Here, we are providing the details of the most used media features.

As soon as the other media features becomes more stable to all modern browsers, we will update it in our tutorial also.

Most supported media features	Purpose
*aspect-ratio*	Ratio of width to height of the viewport
*color*	For colored screen
*grid*	If the device is a grid device
*height*	height of the viewport
*hover*	When the user mouse over(hovers)
*max-aspect-ratio*	Maximum ratio of width to height of the viewport
*max-color*	Maximum number of bits per color in the device
*max-height*	Maximum height of the viewport
*max-resolution*	Maximum number of pixels on display
*max-width*	Maximum width of the viewport
*min-aspect-ratio*	Minimum ratio of width to height of the viewport
*min-color*	Minimum number of bits per color in the device
*min-height*	Minimum height of the viewport
*min-resolution*	Minimum number of pixels on display
*min-width*	Minimum width of the viewport
*orientation*	How the rectangular pages are aligned or positioned
*resolution*	Number of pixels on display
*scan*	When the device is getting scanned
*width*	Width of the viewport

media Query examples with different Media Features

1. Aspect Ratio Related
@media (aspect-ratio: 1/1){ CSS Styles... }

2. Color Related
@media (color){ CSS Styles... }
@media only print and (color){ CSS Styles... }
@media  not print and (color), screen and (color) { CSS Styles... }
@media  not (print and (color)), screen and (color) { CSS Styles... }
@media  (not (print and (color))), screen and (color) { CSS Styles... }

3. grid Related
@media (grid:0){ CSS Styles... }
@media (grid:2){ CSS Styles... }

4. height Related
@media all (height:200px){ CSS Styles... }

5. hover Related
@media (hover: hover){ CSS Styles... } /*Can hover over the elements */
@media (hover: none){ CSS Styles... } /*Cannot hover over the elements */
@media (not(hover)){ CSS Styles... } /* Negation along with hover */

6. max-aspect-ratio Related
@media (max-aspect-ratio: 2/1){ CSS Styles... }

7. max-color Related
@media (max-color:2000){ CSS Styles... } /*A device which has at maximum of 2000 bits per color */

8. max-height Related
@media all and (max-height:200px){ CSS Styles... }

9. max-resolution Related
@media (max-resolution: 250dpi){ CSS Styles... }

10. max-width Related
@media screen and (max-width:200px){ CSS Styles... }

11. min-aspect-ratio Related
@media (min-aspect-ratio: 2/1){ CSS Styles... }

12. min-color Related
@media (min-color:20){ CSS Styles... } /*A device which has at least 20 bits per color */

13. min-height Related
@media only screen and (min-height:200px){ CSS Styles... }

14. min-resolution Related
@media (min-resolution:60dpi){ CSS Styles... }

15. min-width Related
@media not screen and (min-width:200px){ CSS Styles... }

16. orientation Related
@media (orientation:portrait) { CSS Styles... }
@media (orientation:landscape) { CSS Styles... }

17. resolution Related
@media (resolution: 100dpi){ CSS Styles... }

18. scan Related
@media (scan: interlace){ CSS Styles... }
@media (scan: progressive){ CSS Styles... }

19. width Related
@media (width:280px){ CSS Styles... }

media all

The media type @media all sets the different style properties for all the media types. This is the media query for all devices.

For Example:

If you want to change the background color for all the devices to a particular color, then you can use @media all with other characteristics like width, height, min-width, max-width, resolution etc for all the devices.

Example of media all

@media all and (min-width:540px) {
  .main-parent {
    color:red;
    font-size:22px;
    background:black;
    border:4px solid tomato;
  }
}

Note/Info/Success @media all is the default media type.

media print

The CSS media query print property @media print sets different styles for print documents.

For Example:
If you want to go to Print mode, follow this –

For Windows – CTRL + P
For Mac – Command-P

Note/Info/Success To understand the below example (i.e. @media print), please go to PRINT Mode. Just follow the above shortcut to go to print mode if you are on Windows or Mac.
If you are on other devices like android, iphone etc, please follow the shortcut as per the device.

Example of media print

@media print and (min-width:340px) {
  .main-parent {
    color:red;
    font-size:18px;
    border:4px solid tomato;
  }
}

media screen

The CSS media screen property @media screen sets different style properties for all Color Monitor Screens.

This is a widely used media type.

Example of media screen

@media screen and (max-width:500px) {
  .main {
    color:red;
    border:4px solid tomato;
  }
}

media speech

The CSS media query @media-speech – is used for device types which has speech recognition features like Screen readers.

For Example:

@media speech and (max-width:1024px) {
  .main {
   width: 400px;
   margin: 5px;
  }
}

media Query min and max

We have already used min-width and max-width above. Let us understand this further with an example.

The media query min-width is used to set different styles if you want to apply a style only when the device size is more than a particular width.

On the other hand, the media query max-width is used to set different styles if you want to apply a style only when the device size is less than a particular width.

Example of media query min and max

@media all and (min-width:768px) and (max-width:1024px) {
  .main {
    color:brown;
    border:6px solid lightblue;
  }
}

media Query to hide elements

In practical scenario, sometimes you might need to hide certain elements based on some properties like width, height etc.

There are multiple ways to hide the elements like –

display: none; – This will hide the element. Basically it removes the element completely & the element does not occupy any space
visibility: hidden; – This hides the element but the element still occupies some space and the element behaves as if it is disabled
opacity: 0; – This is similar to visibility: hidden but this does not disable the element and you can still select the element
text-indent: -99999px – Basically, using a very large Negative value of text-indent, you can achieve a similar type of effect.

Out of these, the most popular way which TutorialBrain suggests is using display: none. Some Front End developers also prefer to use visibility: hidden.

Example of media Query to hide elements

@media (max-width: 500px) {
 .imgval {
     display: none;
 }
}

Complex media queries

Complex media queries can be created with the combination of –

and
not
comma(,)
only

and operator combines either-

one media type with other media types
The one media type with other media properties(media features) like width, heights etc
A One media property(media features) with multiple media properties(media features)

Example of "and" operator

p { 
 padding:10px;
 border:2px solid brown;
 font-size:2em;
}

@media (min-width: 400px) and (max-width: 700px) {
 p {box-shadow: 25px 15px 10px grey;
   background:lightblue;
 }
}

not operator is the negation operator. It is important to provide the media type while using the not operator.

This operator negates the entire media query(not the individual media feature).

So basically, when the entire media query is true, this operator reverts the expression to false. Similarly, if the media query is false, then this operator reverts the expression to true.

Example of "not" operator

p {
 padding:10px;
 border:5px solid Crimson;
 font-size:2em;
 font-family:Trebuchet MS;
}
@media not all and (max-width: 500px) {
 p {
  text-shadow: 2px 4px 3px grey;
  border-radius: 22px;
 }
}

The comma(,) operator is like logical OR operator.

The comma(,) operator separates each media query from other media queries separated by a Comma(,). If any one of the media query which is separated by comma is true, then the entire media query is true and the same rule will be applicable to all the comma-separated media queries.

Example of "comma (,)" operator

.flexbox-MQ {
 margin:10px;
 display: flex;
}

.child-val {
 padding: 5px;
 margin: 5px;
 width:60px;
 height:60px;
 text-align: center;
 border:1px solid black;
 background-color: #94C548;
}

@media (max-width: 500px), (min-width: 700px) {
 .flexbox-MQ {display: grid;}
}

The only does hold any value for newer browsers. It is important to provide the media type while using the only operator.

It is useful for older browsers which does not support media queries. This stops the older browsers from applying the selected media styles.

Example of "only" operator

.grid-MQ {
 display:block;
 color:#09559E;
 height:70px;
}

.inside-val {
 padding: 2px;
 margin:5px;
 border:2px solid #09559E;
}

@media only screen and (max-width: 500px) {
.grid-MQ  { display: inline-block;
  color:black;}
}

aspect ratio in media query

In an image, the ratio of width to height is called as the aspect ratio. In terms of the web page, this is the ratio of width to height of the viewport.

You can create multiple styles based on different aspect ratio.

Some common aspect ratios for images are:

1:1
3:1
3:2
4:3
5:4
5:3
16:9

The aspect ratio properties like aspect-ratio, min-aspect-ratio, max-aspect-ratio etc are used to set different styles for different aspect ratios.

Example of aspect ratio in media query

h2 {padding:10;
border:2 solid brown;
}
 /*476 X 476  Aspect Ratio for Accurate values*/
@media (aspect-ratio: 1/1){ 
h2 {background-color:skyblue;
color:Green;
}
}
/*Above 953 X 476  Minimum Aspect Ratio */
@media (min-aspect-ratio: 2/1){
h2 {background-color:Gold;
font-size:3em;
}
}
*Maximum Aspect Ratio */
@media (max-aspect-ratio: 2/1){
h2 {background-color:Coral;
font-size:1em;
}
}

CSS media query Orientation

There are 2 types of Page orientation.

Portrait
Landscape

CSS media query Portrait

In Portrait mode, the height size is greater than the width size.

The orientation:portrait property is used for Portrait mode.

Example of CSS media query portrait

.portrait-MQ {
  font-family:tahoma;
  -webkit-text-stroke:1.3px black;
  -webkit-text-fill-color:white;
}

@media (orientation:portrait) {
   .portrait-MQ {
  -webkit-text-fill-color:gold;
   }
 }

CSS media query landscape

The page or image in Landscape mode has greater width size than the height.

The orientation:landscape property is used for Portrait mode.

Example of CSS media query landscape

.landscape-MQ {
  font-family:tahoma;
  -webkit-text-stroke:1.3px black;
  -webkit-text-fill-color:white;
}

@media (orientation:landscape) {
   .landscape-MQ {
  -webkit-text-fill-color:pink;
     border:2px solid black;
}
  }

media Query screen sizes

Media query is one of the most important way to create Responsive Web Design.

So, it is important to style the media based on various screen sizes. The list of various screen sizes are presented below –

List of properties of Media devices

ANDROID PHONES

Android Phones	min-device-width	max-device-width	Orientation
HTC One X	360px	640px	Landscape
HTC One X	360px	640px	Portrait
LG G5	360px	640px	Landscape
LG G5	360px	640px	Portrait
Samsung Galaxy S6	360px	640px	Landscape
Samsung Galaxy S6	360px	640px	Portrait
Samsung Galaxy S6 Edge	360px	640px	Landscape
Samsung Galaxy S6 Edge	360px	640px	Portrait

Standard media queries for ANDROID PHONES

/* HTC One X - Landscape and Portrait */
@media screen and (device-width: 360px) and(device-height: 640px) { /*CSS Style*/}

/* HTC One X - Landscape and Portrait */
@media screen and (device-width: 360px) and(device-height: 640px) { /*CSS Style*/}

/* LG G5 - Landscape and Portrait */
@media screen and (device-width: 360px) and(device-height: 640px) { /*CSS Style*/}

/* Samsung Galaxy S6 - Landscape and Portrait */
@media screen and (device-width: 360px) and(device-height: 640px) { /*CSS Style*/}

/* Samsung Galaxy S6 Edge - Landscape and Portrait */
@media screen and (device-width: 360px) and(device-height: 640px) { /*CSS Style*/}

ANDROID TABLETS

Android Tablets	min-device-width	max-device-width	Orientation
Nexus 10	800px	1280px	Landscape
Nexus 10	800px	1280px	Portrait
Nexus 7	600px	960px	Landscape
Nexus 7	600px	960px	Portrait
Surface Pro 3	960px	1440px	Landscape
Surface Pro 3	960px	1440px	Portrait

Standard media queries for ANDROID TABLETS

/* Nexus 10 - Landscape and Portrait */
@media screen and (device-width: 800px) and(device-height: 1280px) and (orientation:landscape/portrait) { /*CSS Style*/}

/* Nexus 7 - Landscape and Portrait */
@media screen and (device-width: 600px) and(device-height: 960px) and (orientation:landscape/portrait) { /*CSS Style*/}

/* Surface Pro 3  - Landscape and Portrait */
@media screen and (device-width: 960px) and(device-height: 1440px) and (orientation:landscape/portrait) { /*CSS Style*/}

MISC

Misc	min-device-width	max-device-width	Orientation
BlackBerry Z10	384px	640px	Landscape
BlackBerry Z10	384px	640px	Portrait
Kindle Fire	1024px	600px	Landscape
Kindle Fire	1024px	600px	Portrait

/* BlackBerry Z10 - Landscape and Portrait */
@media only screen and (min-device-width: 384px) and(max-device-width: 640px) and (orientation:landscape/portrait) { /*CSS Style*/}

/* Kindle Fire - Landscape and Portrait */
@media only screen and (min-device-width: 600px) and(max-device-width: 1024px) and (orientation:landscape/portrait) { /*CSS Style*/}

IPAD

IPAD	min-device-width	max-device-width	Orientation
iPad	768px	1024px	Landscape
iPad	768px	1024px	Portrait
iPad Mini	768px	1024px	Landscape
iPad Mini	768px	1024px	Portrait
iPad Mini 2	1536px	2048px	Landscape
iPad Mini 2	1536px	2048px	Portrait
iPad Pro	2048px	2732px	Landscape
iPad Pro	2048px	2732px	Portrait

Standard media queries for IPAD

/* iPad  - Landscape and Portrait */
@media only screen and (min-device-width: 768px) and(max-device-width: 1024px) and (orientation:landscape/portrait) { /*CSS Style*/}

/* iPad Mini  - Landscape and Portrait */
@media only screen and (min-device-width: 768px) and(max-device-width: 1024px) and (orientation:landscape/portrait) { /*CSS Style*/}

/* iPad Mini 2-4  - Landscape and Portrait */
@media only screen and (min-device-width: 1536px) and(max-device-width: 2048px) and (orientation:landscape/portrait) { /*CSS Style*/}

/* iPad Pro - Landscape and Portrait */
@media only screen and (min-device-width: 2048px) and(max-device-width: 2732px) and (orientation:landscape/portrait) { /*CSS Style*/}

IPHONE

IPHONE	min-device-width	max-device-width	Orientation
iPhone 4	320px	480px	Landscape
iPhone 4	320px	480px	Portrait
iPhone 5	320px	568px	Landscape
iPhone 5	320px	568px	Portrait
iPhone 7	375px	667px	Landscape
iPhone 7	375px	667px	Portrait
iPhone 7 Plus	414px	736px	Landscape
iPhone 7 Plus	414px	736px	Portrait

Standard media queries for IPHONE

/* iPhone 4 - Landscape and Portrait */
@media only screen and (min-device-width: 320px) and(max-device-width: 480px) and (orientation:landscape/portrait) { /*CSS Style*/}

/* iPhone 5 - Landscape and Portrait */
@media only screen and (min-device-width: 320px) and(max-device-width: 568px) and (orientation:landscape/portrait) { /*CSS Style*/}

/* iPhone 7 - Landscape and Portrait */
@media only screen and (min-device-width: 375px) and(max-device-width: 667px) and (orientation:landscape/portrait) { /*CSS Style*/}

/* iPhone 7plus - Landscape and Portrait */
@media only screen and (min-device-width: 414px) and(max-device-width: 736px) and (orientation:landscape/portrait) { /*CSS Style*/}