media-query-sizes

About

Simple media query breakpoints for Styled Components, following the DevTools standard dimensions.

Available Breakpoints

desktop: 2560px
laptopL: 1440px
laptop: 1024px
tablet: 768px
mobileL: 425px
mobileM: 375px
mobileS: 320px

Installation

npm install media-query-sizes --save-dev

Example

import styled from "styled-components";
import device from "media-query-sizes";

export const Card = styled.div`
  display: flex;

  @media ${device.laptop} {
    flex-direction: column;
  }

  /* Becomes */

  @media (max-width: 1024px) {
    flex-direction: column;
  }
`;

License

MIT

Made with 💙 by Rian Oliveira