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.|
|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
The media type @media all sets the different style properties for all the media types. This is the media query for all devices.
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
The CSS media query print property @media print sets different styles for print documents.
If you want to go to Print mode, follow this –
- For Windows – CTRL + P
- For Mac – Command-P
If you are on other devices like android, iphone etc, please follow the shortcut as per the device.
Example of media print
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
The CSS media query @media-speech – is used for device types which has speech recognition features like Screen readers.
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 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
Complex media queries
Complex media queries can be created with the combination of –
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
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
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
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
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:
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
CSS media query Orientation
There are 2 types of Page orientation.
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
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
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
|HTC One X||360px||640px||Landscape|
|HTC One X||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
|Surface Pro 3||960px||1440px||Landscape|
|Surface Pro 3||960px||1440px||Portrait|
Standard media queries for ANDROID TABLETS
|iPad Mini 2||1536px||2048px||Landscape|
|iPad Mini 2||1536px||2048px||Portrait|
Standard media queries for IPAD
|iPhone 7 Plus||414px||736px||Landscape|
|iPhone 7 Plus||414px||736px||Portrait|
Standard media queries for IPHONE