<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

Gaurav's Blog

Gaurav's Blog

Device Sizes for CSS Media Queries

Table of contents

Phones

Teblets

IPads

IPads pro, Tablets pro

Laptop

Large Screen