How CSS Media Queries should work in the Browser.
Ivan Jeremic

Ivan Jeremic @ivan_jrmc

About: Web/Software Developer

Joined:
Dec 9, 2018

How CSS Media Queries should work in the Browser.

Publish Date: Dec 13 '20
6 0

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.

Comments 0 total

    Add comment