Media query:

Media query is a property of CSS. Media query is used to add style for different types of devices and browsers. Media queries can also target different elements of HTML to change its style. It can also be used to make the website responsive. There are many frameworks of CSS available to make websites responsive and user-friendly. But if one is a beginner in web development, it is necessary to start from core CSS. To make the website responsive using core CSS, media queries are used.

What is responsiveness?

Responsiveness means fixed in any size as per requirement. A responsive website is properly fixed to the different types of browsers and any size of device.

Syntax of Media Query:

A media query is a combination of the media type and one or more media feature expressions which is combined by the logical operator. Here, 'not', 'only' and 'and' are logical operators. If this expression returns true then this query will execute.

@media not/only mediatype and (expression){
property:value;
}

In many ways, media queries can be targeted. Some of the ways with its examples are shown below.

Targetting Media types:

Media types can be targeted in three ways. 1)all 2)print 3)screen

all: It is targeted to all devices.

print: When there is a need to check the paged preview for printing, it targets style while previewing the page.

screen: It targets styles for the screen.

The syntax of targetting media types is shown below. This way, other media types can also be targeted.

@media print {
property:value;
}
@media screen {
property:value;
}

Keywords:

There are three different keywords are used in a media query, which is described below.

and:

When there is a need to check multiple expressions at a time, at that time, for combining expression 'and- keyword' is used. The example is given below.

https://codesandbox.io/s/compassionate-cdn-gzdlp8?file=/index.html

As shown in the example, when the size of the screen converts from an extra small to a small size, a media query is applied, is used 'and-keyword' to check the minimum and maximum width of the screen.

When both expressions return true at that time only the style will change.

only:

To specify media type in the latest browser, 'only-keyword' is used. When not using 'only-keyword', older browsers interrupt the query 'screen and (min-width:500px)' as 'screen'. It applies the style to the whole screen. By using 'only-keyword', this problem is resolved.

not:

Not-keyword is used to negate queries. If any expression returns 'true', it converts it into 'false' and according to that executes the code of CSS.

Targetting Media-features:

Media features in the media queries are used to target particular elements for computer screens, mobile devices etc. In a query, it can be written in parathesis. When there is a need to change or add style on a specific feature of a page, that time it can be targeted as below.

Syntax:

@media (expression to target a feature){
poperty:value;
}