Emotion Breakpoints
Responsive web design is a web design method that enables the website to fit the screens of different devices automatically. Breakpoints define the screen size of the device. Cherry is built with the mobile first approach and uses Emotion to generate styles.
import { localTheme as theme } from "./theme";
const breakpoints = theme.spacing.breakpoints;
const Breakpoints = {
xs: 0,
sm: 1,
md: 2,
lg: 3,
xl: 4,
xxl: 5,
xxxl: 6,
};
function mq(minWidth) {
return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;
}
export { mq, Breakpoints };
${mq(Breakpoints.xs)} {
// Media query for the Extra Small size = 0px
}${mq(Breakpoints.sm)} {
// Media query for the Small size = 576px
}${mq(Breakpoints.md)} {
// Media query for the Medium size = 768px
}${mq(Breakpoints.lg)} {
// Media query for the Large size = 992px
}🖥 Desktop starts here
${mq(Breakpoints.xl)} {
// Media query for the XL Large size = 1200px
}${mq(Breakpoints.xxl)} {
// Media query for the XXL Large size = 1440px
}${mq(Breakpoints.xxxl)} {
// Media query for the XXXL Large size = 1920px
}