<p>When dealing with Responsive Web Designs you will have to use <code>@media</code> queries to change the look of your website in different device sizes. </p>
<p>In this blog post, you can find different device sizes you can use with your <a href="https://hashnode.com/@media" class="user-mention" target="_blank" rel="noopener">@media</a> queries.</p>
<h2 id="heading-phones">Phones</h2>
<pre><code>(min<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 320px) and (max<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 480px)
</code></pre><h2 id="heading-teblets">Teblets</h2>
<pre><code>(min<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 481px) and (max<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 768px)
</code></pre><h2 id="heading-ipads">IPads</h2>
<pre><code>(min<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 769px) and (max<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 1024px)
</code></pre><h2 id="heading-ipads-pro-tablets-pro">IPads pro, Tablets pro</h2>
<pre><code>(min<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 1025px) and (max<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 1366px)
</code></pre><h2 id="heading-laptop">Laptop</h2>
<pre><code>(min<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 1367px) and (max<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 1760px)
</code></pre><h2 id="heading-large-screen">Large Screen</h2>
<pre><code>(min<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 1760px) and (max<span class="hljs-operator">-</span>device<span class="hljs-operator">-</span>width : 1920px)
</code></pre><hr />
<p><strong>If you found the content I share useful then share it with your developer friends and also follow me on <a target="_blank" href="https://www.instagram.com/gaurav_vaala/">Instagram</a> and <a target="_blank" href="https://twitter.com/gaurav_vaala">Twitter</a></strong></p>


When dealing with Responsive Web Designs you will have to use `@media` queries to change the look of your website in different device sizes. 

In this blog post, you can find different device sizes you can use with your @media queries.

## Phones
```
(min-device-width : 320px) and (max-device-width : 480px)
```

## Teblets
```
(min-device-width : 481px) and (max-device-width : 768px)
```

## IPads
```
(min-device-width : 769px) and (max-device-width : 1024px)
```

## IPads pro, Tablets pro
```
(min-device-width : 1025px) and (max-device-width : 1366px)
```

## Laptop
```
(min-device-width : 1367px) and (max-device-width : 1760px)
```

## Large Screen
```
(min-device-width : 1760px) and (max-device-width : 1920px)
```

___

**If you found the content I share useful then share it with your developer friends and also follow me on [Instagram](https://www.instagram.com/gaurav_vaala/) and [Twitter](https://twitter.com/gaurav_vaala)**

Device Sizes for CSS Media Queries

Phones

Teblets

Device Sizes for CSS Media Queries

Table of contents

Phones

Teblets

IPads

IPads pro, Tablets pro

Laptop

Large Screen