roa-mirage/src/theme/breakpoints.js

[Live Demo of the Pattern Library](https://mealeyst.github.io/mirage/)

import { css } from 'styled-components'

const sizes = {
  phone: 320,
  phoneMax: 414,
  tablet: 768,
  tabletMax: 960,
  laptop: 1280,
  desktop: 1440
}

export default Object.keys(sizes).reduce((accumulator, label) => {
  // use em in breakpoints to work properly cross-browser and support users
  // changing their browsers font-size: https://zellwk.com/blog/media-query-units/
  const emSize = sizes[label] / 16
  accumulator[label] = (...args) => css`
    @media (min-width: ${emSize}em) {
      ${css(...args)}
    }
  `
  return accumulator
}, {})