PostCSS 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.
@media (--screen-xs) {
// Media query for the Extra Small size = 0px
}@media (--screen-sm) {
// Media query for the Small size = 576px
}@media (--screen-md) {
// Media query for the Medium size = 768px
}@media (--screen-lg) {
// Media query for the Large size = 992px
}🖥 Desktop starts here
@media (--screen-xl) {
// Media query for the XL Large size = 1200px
}@media (--screen-xxl) {
// Media query for the XXL Large size = 1440px
}@media (--screen-xxxl) {
// Media query for the XXXL Large size = 1920px
}