score:34

It all comes down to CSS. Regardless of whether you are using vanilla CSS, SCSS, LESS, or CSS-in-JS, you're wanting to target your components with CSS selectors that allow you to adapt to resolution changes.

Here's a basic example:

// ./foo.js
import React from "react";
import "./styles.css";

// Either as a Class
export default class FooClass extends React.Component {
  render() {
    return <div className="foo">Foo</div>;
  }
}

// Or as a function
export default FooFunction = (props) => <div className="foo">Foo</div>;

And in your styles.css:

.foo {
  background-color: red;
  width: 100%;
  margin: 0 auto;

  /* Small Devices, Tablets */
  @media only screen and (min-width : 768px) {
    width: 75%;
    background-color: green;
  }

  /* Medium Devices, Desktops */
  @media only screen and (min-width : 992px) {
    width: 50%;
    background-color: pink;
  }
}

The styles above are applied in a mobile-first approach, meaning that the default class declaration is provided with how the element will look on the smallest screen targeted. Those mobile styles will be overridden by the subsequent media queries. Over the years, these "inline" media queries directly under the CSS class have become my favorite way to organize my responsive styles.

Here are some responsive design resources:

https://css-tricks.com/nine-basic-principles-responsive-web-design/

A comprehensive list of Media Queries


Related Query

More Query from same tag