Prince Prince - 11 months ago 46
CSS Question

What's the difference between @media screen and (max-width:770px) and @media screen and (max-width:770px + 30px)

I just got a project that I am supposed to work on. In the CSS file of this project, I found the following code:

@media screen and (max-width: 770px + 30px) {
.rw-layout {
margin: 10px;

I tried to find out how it can affect the element
but it is not working.

I tried to view in the developer tools of Firefox and no information as others:

enter image description here

So the question I am asking is that, what is the use of
@media screen and (max-width:770px + 30px)
in the project?

Answer Source

That's invalid CSS and won't work in many (if any) browsers. If I had to guess how it happened, one possible scenario is perhaps he made a media query in a CSS preprocessor like Sass with variables - something like:

$tablet: 770px;
$pad: 30px;

@media screen and (max-width: $tablet + $pad) { }

But the variables ended up being transcluded instead of added up during compilation.

Either way, it's meaningless code the way it's currently written and will not execute - it doesn't mean 800px or 770px.