DEV Community

Ivan Jeremic
Ivan Jeremic

Posted on • Edited on

2 1

How CSS Media Queries should work in the Browser.

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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 };
}
Enter fullscreen mode Exit fullscreen mode

No code duplication.

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More