how to make your style components with response to the screen

algorithm response style-components

import { breakpoints } from "./_variables";
import { css } from "styled-components";

export const respondTo = Object.keys(breakpoints).reduce(
  (accumulator, label) => {
    accumulator[label] = (...args) => css`
      @media (min-width: ${breakpoints[label]}) {
        ${css(...args)};
      }
    `;

    return accumulator;
  },
  {}
);