CSS Media Queries allow you to create responsive websites across all screen sizes, ranging from desktop to mobile. So you can see why it's important to learn this topic.
SYNTAX
<pre><code class="lang-css">@media screen and (max-width: 768px){
 .container{
 //Your code's here
 }
}
</code></pre>
<h3 id="heading-media-types">Media Types</h3>
<ul>
<li>all
</li>
<li>print
</li>
<li>screen
</li>
<li>speech
</li>
</ul>
<h3 id="heading-breakpoints">Breakpoints</h3>
<ul>
<li>Mobile -&gt; 576px
</li>
<li>Tablet -&gt; 768px
</li>
<li>Laptop -&gt; 992px
</li>
<li>Desktop -&gt; 1200px
</li>
</ul>
<pre><code class="lang-css">$mobile : 576px;
$tablet : 768px;
$laptop : 992px; 
$desktop : 1200px;
</code></pre>
<h3 id="heading-min-width-amp-max-width-functions">min-width &amp; max-width Functions</h3>
max-width function
Using this function, we are creating a boundary. This will work as long as we are inside the boundary.
min-width function
We are also creating a boundary here. But this will work if we go outside the boundary.
<pre><code class="lang-css">@media screen and (max-width : 576px){
 .container{
 background-color: #c3c3c3;
 }
}
</code></pre>
HAPPY LEARNING :)

CSS Media Queries allow you to create responsive websites across all screen sizes, ranging from desktop to mobile. So you can see why it's important to learn this topic.

**SYNTAX**

```css
@media screen and (max-width: 768px){
  .container{
   //Your code's here
  }
}
```

### Media Types

* all
    
* print
    
* screen
    
* speech
    

### Breakpoints

* Mobile  -&gt; 576px
    
* Tablet  -&gt; 768px
    
* Laptop  -&gt; 992px
    
* Desktop -&gt; 1200px
    

```css
$mobile  : 576px;
$tablet  : 768px;
$laptop  : 992px; 
$desktop : 1200px;
```

### m**in-width & max-width Functions**

**max-width function**

Using this function, we are creating a boundary. This will work as long as we are **inside the boundary**.

**min-width function**

We are also creating a boundary here. But this will work if we go **outside the boundary**.

```css
@media screen and (max-width : 576px){
  .container{
    background-color: #c3c3c3;
  }
}
```

**HAPPY LEARNING :)**

Thanush's Blog

Thanush's Blog

CSS Media Queries

Table of contents

Media Types

Breakpoints

min-width & max-width Functions