example1.jsx

import styled, { css } from 'styled-components';


const breakpoints = {
  xs: '576px',
  sm: '768px',
  md: '992px',
  lg: '1200px',
};

const media = {
  xs: (styles) => css`
    @media (min-width: ${breakpoints.xs}) {
      ${styles}
    }
  `,
  sm: (styles) => css`
    @media (min-width: ${breakpoints.sm}) {
      ${styles}
    }
  `,
  md: (styles) => css`
    @media (min-width: ${breakpoints.md}) {
      ${styles}
    }
  `,
  lg: (styles) => css`
    @media (min-width: ${breakpoints.lg}) {
      ${styles}
    }
  `,
};


// Пример
const Wrapper = styled.div`
  font-size: 15px;
  padding-top: 40px;
  padding-bottom: 40px;

  ${media.xs`
    font-size: 16px;
    padding-top: 45px;
    padding-bottom: 45px;
  `}

  ${media.sm`
    font-size: 17px;
    padding-top: 50px;
    padding-bottom: 50px;
  `}

  ${media.md`
    font-size: 18px;
    padding-top: 55px;
    padding-bottom: 55px;
  `}

  ${media.lg`
    font-size: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
  `}
`;