# 🎯CSS media Queries.

## 🖥️ 💻 📱

Hey folks, 🙇‍♂️welcome to the new article on CSS media queries. With the help of this article, you become able to understand what is Media Queries, How it works, why we use them and so many things. So let's get started🙂.

## <mark>📍What are Media Queries in CSS?</mark>

* Media queries are the CSS technique that allows applying CSS style to depend upon the character of the screen.
    
* In other words, media queries are the technique that helps us to make any web pages or websites responsive. The word responsive means, in general, we use different types of machines in daily life like Desktop, Laptop, Tablets and Mobile phones and these machines have different types of viewports. By using media queries we make the web pages as much as responsive based on the viewport character of machines, which means the web pages become a proper fit on each viewport.
    

**Syntax of media queries.**

```css
@media media-type and(media feature rules)
{
   /*  CSS rules which you want.   */
}
```

**Example:**

let's suppose when you want to make the display background color green when the max-width of the display became 800px.

```css
@media only screen and (max-width:800px)
{
  body{
         background:green;
      }
}

```

## <mark>📍How do media queries work?</mark>

* Media queries work by testing the device's characteristics against a set of predefined conditions. If the device meets the conditions specified in the media query, the styles defined in the media query are applied. If the device does not meet the conditions specified in the media query, the default styles are applied.
    
* Media queries work by using the **@media** rule in CSS. The **@media** rule is used to define a set of styles that should be applied to a web page based on the device's characteristics. The **@media** rule is followed by a set of conditions that must be met for the styles to be applied. The conditions are defined using media features.
    
* Media features are predefined characteristics that can be tested using media queries. Some of the most common media features include **min-width**, **max-width**,**orientation**, and **resolution**. The **min-widht** and **max-widht** media features are used to test the device's screen size, while the **orientation** media feature is used to test the device's orientation (portrait or landscape). The **resolution** media feature is used to test the device's screen resolution.
    

## **<mark>📍Types of media queries</mark>**

Generally there are **two** typs of media queries

1. And
    
2. Only
    

**1). And :** The **and** media query is the most common and is used to apply styles to devices that meet multiple conditions.

**2). Only:** The **only** media query is used to apply styles to devices.

**Example:**

```css
@media only screen and (max-width:800px)
{
  body{
         background:green;  /* or any css properties */
      }
}
```

## <mark>📍Device break point in media queries</mark>

These are used to mention the device minimum and maximum width on which you want to apply the CSS styling.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682772171202/decc12e8-b999-4243-9ef9-05b35be065da.jpeg align="center")

`min-width: 600px;` This property is used to give the minimum width from where the given styling should start applying. Only from this width the given styling will be applied.

```css
@media (min-width: 765px) { 
             .container{
                            /* css styles */ 
                       }
}
```

`max-width: 900px;` This property is used to give the maximum width up to where the given styling should be applied. After crossing the range then all of the styling mentioned in this query will be removed.

```css
@media (max-width: 1140px) {
        .container{
                     /* css styles */
                  }
            }
```

We can use both properties using conditional operators to target the particular size. an example is provided below.

```css
@media (min-width: 570px) and (max-width: 750px)  {
        .container{
                       /* css styles */
                  }
           }
```

**<mark>Thank you :)</mark>**