CSS media queries

hi friends today I am going to write about CSS media queries.

CSS media queries are a way of to target browser and change certain styling or run other code when certain required conditions are met.

media queries are mainly used to create websites which are responsive i.e. that change with respect to the screen.

the typical syntax of media queries are:

`@media mediatype operator(mostly and) media-feature operator media-feature {
.element {
/* Apply some styles */

}
}
`

let us break down the syntax

@media must be compulsorily used to write media queries it is a rule to include a block of CSS properties only if a certain condition is true.

media-type: the name chosen for the media type decides which type of device the queries are targeted the main type of media-types are in modern times the situations to write media types are rare :

• all: suitable all devices

• print: Matches documents that are viewed in a print preview or any media that breaks the content up into pages intended to print.

• screen: Intended primarily for color computer screens.

• speech: Matches devices that read the content audibly, such as a screen reader.

media-feature: describes the features of the devices such as size of screen, type of screen etc. but the mostly used features are max-width, min- width and may be sometimes orientation(landscape or portrait).

operator: Media queries support logical operators like many programming languages so that we can match media types based on certain conditions. most widely used operator is and.

let us see media queries in action via the following example.

code:
.item{
height: 100px;
width: 100px;
border: 2px solid black;
margin: 10px ;
}
@media screen and (max-width: 600px) and (min-width: 500px) {
body{
background-color: aqua;
}
.container{
display: flex;
flex-wrap: wrap;
}
}

result(between 500px and 600px):

as seen in the above image all the media query properties will be applied at the range of screen sizes of 500px and 600px