This is how Media Queries currently work in the Browser.
.nav {
background-color: #f40
}
@media screen and (max-width: 992px) {
.nav {
background-color: blue;
}
}
@media screen and (max-width: 600px) {
.nav {
background-color: olive;
}
}
And this is how I think CSS Media Queries should work in CSS.
body {
breakpoints: {
sm: 30em,
md: 48em,
lg: 62em,
xl: 80em,
};
}
.nav {
background-color: { sm: olive, md: olive, lg: blue, xl: blue };
}
No code duplication.
Top comments (0)