device screen sizes

December 2, 2022 - Reading time: ~1 minute

Here's a list of screen sizes by device:

• 320px — 480px: Mobile devices.
• 481px — 768px: iPads, Tablets.
• 769px — 1024px: Small screens, laptops.
• 1025px — 1200px: Desktops, large screens.
• 1201px and more — Extra large screens, TV.

Another set:

• Small Devices (smartphones): up to 640px
• Medium Devices (tablets): 641px to 1024px
• Large Devices (desktops): 1025px and larger

(Thanks FreeCodeCamp!)

In the CSS document, place the @media rule after the first no-rule is applied. For instance:

main {
    width: 55%;
    max-width: 400px;
}

@media screen and (max-width: 500px) {
    main {
        width: 85%;
    }
}