<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1682618999175/aac673af-7d4b-47c2-a381-9d7c5602a259.png" alt class="image--center mx-auto" /></p>
<h3 id="heading-media-query">Media Query:-</h3>
<p>Media queries are a key part of <strong>responsive web design</strong>, as they allow us to create different layouts depending on the size of the viewport (screen size).</p>
<h3 id="heading-css-breakpoints">CSS Breakpoints:-</h3>
<p>CSS breakpoints are used to <strong>adjust</strong> the styling of a webpage to match the <strong>screen width</strong> of the device it is being viewed on. The most common breakpoints are based on the width of the device screen, but other criteria such as screen resolution can also be used.</p>
<h3 id="heading-viewport">Viewport:-</h3>
<p>The viewport is the <strong>user's visible area</strong> of a web page. The viewport varies with the device. Before tablets and mobile phones, web pages were designed only for computer screens and it was common for web pages to have a static design and a fixed size.</p>
<h3 id="heading-breakpoints-for-different-devices">Breakpoints for different devices:-</h3>
<ol>
<li><p><strong>Mobile devices:-</strong> 320px to 480px</p>
</li>
<li><p><strong>Ipads and Tablets:-</strong> 481px to 768px</p>
</li>
<li><p><strong>Small screens, Laptops:-</strong> 769px to 1024px</p>
</li>
<li><p><strong>Desktops, Large screens:-</strong> 1025px to 1200px</p>
</li>
<li><p><strong>Extra large screens, TV:-</strong> 1201px and More.</p>
</li>
</ol>


![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682618999175/aac673af-7d4b-47c2-a381-9d7c5602a259.png align="center")

### Media Query:-

Media queries are a key part of **responsive web design**, as they allow us to create different layouts depending on the size of the viewport (screen size).

### CSS Breakpoints:-

CSS breakpoints are used to **adjust** the styling of a webpage to match the **screen width** of the device it is being viewed on. The most common breakpoints are based on the width of the device screen, but other criteria such as screen resolution can also be used.

### Viewport:-

The viewport is the **user's visible area** of a web page. The viewport varies with the device. Before tablets and mobile phones, web pages were designed only for computer screens and it was common for web pages to have a static design and a fixed size.

### Breakpoints for different devices:-

1. **Mobile devices:-** 320px to 480px
    
2. **Ipads and Tablets:-** 481px to 768px
    
3. **Small screens, Laptops:-** 769px to 1024px
    
4. **Desktops, Large screens:-** 1025px to 1200px
    
5. **Extra large screens, TV:-** 1201px and More.

What is Media Query ?

Table of contents

Media Query:-

CSS Breakpoints:-

Viewport:-

Breakpoints for different devices:-