React: screen sizes, device types and media queries

Alexander Karan
Nov 1 · 3 min read

Making your web app accessible on all devices is super easy…. said no one ever. Due to consumerism, we are churning out new screen sizes and device types every year, making developers and designers life harder. I swear I am one more iPad size away from blowing up Apple.

Photo by Constellate on Unsplash

So how do we respond to different screen sizes and change the layout based on the dimensions? Well the most straightforward way is with CSS media queries.

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

When the screen size matches or is greater than the specified screen size, any CSS in the query is applied. In the below example, I use media queries to change the width of the divs. On mobile, the divs stack on top of each other in a column. On desktops, the divs stretch across the screen only taking up one line.

Media Query Example

All your problems sorted now right? …no, not yet. Thanks to new devices we now have iPads that, in landscape mode are bigger than 992px, so what do we do now? The first step would be to create our own media query.

@media (max-device-width : 1024px) { ... }

This media query is a little different. Styles inside the media query will be applied from zero up to 1024px, unlike the previous media queries where the styles only kick in once the screen size is larger than what they define. However, I find this one a slippery slope because if you consider the iPad Pro, who’s screens are huge, then this media query will still not work. Now, this comes down to preference, but personally, anything more significant than an iPad in the landscape should be big enough to support a large layout.

However, what do you do if you have some features that rely on using the hover feature, for example, to show and hide a button in a table row? You could use media queries based on device width to turn this feature on and off; however, as you now know, some mobile/tablet devices are larger than some laptops but don’t support hover. Fortunately, there is a media query to support that:

@media (any-hover: hover) { ... }

Any CSS in this query will run if the device supports hover. Below is a full example where the buttons in the table only display on hover but are always visible if it’s a mobile or tablet device, as these devices don’t support hover.

Now for the last example. What if we want to use media queries in-line in a react component and not in CSS? How can we do that? We can access a property in the window object to do so and create a custom hook:

For more info on media queries, see how Bootstrap uses them here:

For all media queries check out the full list here:

Hopefully, you found some of this useful. Keep making those web apps accessible on all devices - the web is more enjoyable when we can all use it with ease.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade