How to use css @media query? CSS Tutorial 25

 

  CSS @media query

1. Introduction to CSS @media query
2. Syntax of CSS @media query
3. Example of CSS @media query

Introduction to CSS @media query

CSS @media query is used to define different CSS styles for different media devices such as Mobile, Desktop, Tablet, etc. It often happens that the same style is defined for all media devices. But doing this does not properly display your webpage on different media devices.  

For example, if you will look at a normal webpage on mobile it does not display properly. That page does not fit on mobile device because its width is too high for mobile. 

In this case, you need to optimize that webpage for mobile devices. For this, you can define CSS styles on that page by using the @media query. These styles work only when the webpage will be viewed on a mobile device.

Similarly, you can define different CSS styles by @media query for different types of media devices (desktop, laptop, tablets, etc.). This query is also known as CSS media queries. 

Whenever you define this query on your webpage and view the webpage through a device, then this query collects information like that of the device's viewport (device's real screen area), width, height, orientation, and resolution, etc. Later on, different styles are applied on different devices depending on the same information.

Different media feature expressions are used to collect this information. About this, you will learn further. But let's try to understand the syntax of @media query before that.

Syntax of CSS @media query

The general syntax of CSS @media query has been given below.

@media operator media-type operator (media-features-expression)

{

    CSS code will be here;

} 

As you can see in the above syntax, the @media query is defined as the block of media type, keyword, and media features. To define this query you use @media keyword.

To understand this syntax, you must understand all these terms. These are explained below in detail.

Operator

Operators are used to creating media queries. You can use the below operators.

• and - This is used to combine operator media features.
• not - This is used to negate operator media query.
• only - By using this operator only the CSS query is applied when the complete query is true.

media-type

The media type is the device type on which you want to define the CSS style. For the media type, you can define the values as below.

• all - This value is used for all media devices.
• print – This value is used for printers.
• screen - This value is used for desktop computers, tablets, and mobile media devices. While designing the Web, you will mainly use this value.
• Speech – This value is used for screen readers. Screen readers can read the text of the screen loudly.

media-feature-expression

Media feature expressions are used to test the special features of the media device. For example, if you want to apply the CSS style to the same devices whose width of the viewport is less than 500 pixels, then the max-width media feature expression will be used.

You can use the following media feature expressions as a value.

• width – This is used to test the width of the viewport.     
• min-width - This is used to test the minimum width of the viewport.
• max-width - This is used to test the maximum width of the viewport.
• height - This is used to test the height of the viewport.
• min-height - This is used to test the minimum height of the viewport.
• max-height - This is used to test the maximum height of the viewport. 
• aspect-ratio - This is used to test aspect ratio of the width and height for the viewport
• orientation - This is used to test the orientation of the viewport
• resolution - This is used to test the resolution of the media device.
• scan - media device to test the scanning process of the media device.
• grid - This is used to test the grid or bitmap screen in the device.
• update - This is used to test, how to quickly update the device appearance.
• overflow-block - This is used to test the overflow-block condition handling media device.
• overflow-inline - This is used to test the overflow-inline condition handling media device.
• color – This is used to test how much color component is in every bit of the media device.
• color-gamut - This is used to test how many colors are supported by the media device.
• color-index - This is used to test how many entries are in the color lookup table of the media device.
• display-mode - This is used to test the display mode of the web application.
• Monochrome – This is used to test how many colors are there at per bit in a monochrome device.
• inverted-colors – This is used to test the browser or operating system colors invert.
• pointer – This is used to test the primary input mechanism is an input device
• hover – It is used to test the user hovers on the elements from the primary mechanism.
• any-pointer – It is used to test any available input device is a pointing device. 
• any-hover - It is used to test the user hover on the elements from any available input device.
• light-level – This is used to test the light level of the environment.
• scripting – It is used to test the availability of scripting.

Example of CSS @media query

The CSS @media query can be explained by a simple example. In the example, such a style is defined by @media query which will only apply to those devices whose width is 300 pixels.

<!DOCTYPE html>

<html>

<head>

 <title> CSS @media Query Example </title>
<style>
@media only screen and (width: 400px){
    body{
        width: 400px !important
        }
}
</style>
</head>
<body>
<p> I like the MyBlogHelp.com website. MyBlogHelp is a website where articles are shared like Blogging, SEO, Web Design, Web Development, HTML, CSS and Computer related all Tips. </p> 

</body>

</html>

The above example will create such a webpage that is displayed correctly even when viewed on the 300-pixel device.

          <<-- PREVIOUS                                                                                               NEXT -->>