Every developer know not-from-today, that website which works only on computer’s desktop is not value for users. Today, a website must not work and look good only on a desktop screen, but also on tablets and smartphones. It’s a must-must that no one is even talking about it!

Since no one is talking about it, how to find out how to it? Since recently I am working on real deal, big time project for Fight Pandemics, I am learning everyday something new! I want to make someone’s life a little easier and provide some resources to make sure your app is working perfectly on any device.

For React lovers (like me): responsive-react: Conditional rendering of react component for responsive display. Device-type based rendering of react components, like render when desktop and for mobile or tablet.

import {
isMobileDevice,
isTabletDevice,
isLaptopDevice,
isBiggerThanLaptop
} from "react-responsive/utilResponsive";

Very similar with option to track device, also for React lovers ❤ react-device-detect: Detect device, and render view according to the detected device type.

import {
BrowserView,
MobileView,
isBrowser,
isMobile
} from "react-device-detect";

For Bootstrap lovers, you can create layouts with responsive breakpoints. Bootstrap primarily uses the following media query ranges — or breakpoints — in our source Sass files for our layout, grid system, and components.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// 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) { ... }

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

SOFTWARE ENGINEER — WEB DEVELOPER WITH HEART FOR FRONT-END, MINIMALISM AND RASMENTALISM.