Simple media query breakpoints for Styled Components, following the DevTools standard dimensions.
desktop: 2560px
laptopL: 1440px
laptop: 1024px
tablet: 768px
mobileL: 425px
mobileM: 375px
mobileS: 320px
npm install media-query-sizes --save-dev
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;
}
`;
Made with 💙 by Rian Oliveira