What does @media screen and (max-width: 1024px) mean in CSS?

I found this piece of code in a CSS file I inherited, but I can't make any sense out of it:

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

Specifically, what is happening on the first line?

Solution 1:

That’s a media query. It prevents the CSS inside it from being run unless the browser passes the tests it contains.

The tests in this media query are:

1. @media screen — The browser identifies itself as being in the “screen” category. This roughly means the browser considers itself desktop-class — as opposed to e.g. an older mobile phone browser (note that the iPhone, and other smartphone browsers, do identify themselves as being in the screen category), or a screenreader — and that it’s displaying the page on-screen, rather than printing it.

2. max-width: 1024px — the width of the browser window (including the scroll bar) is 1024 pixels or less. (CSS pixels, not device pixels.)

That second test suggests this is intended to limit the CSS to the iPad, iPhone, and similar devices (because some older browsers don’t support max-width in media queries, and a lot of desktop browsers are run wider than 1024 pixels).

However, it will also apply to desktop browser windows less than 1024 pixels wide, in browsers that support the max-width media query.

Here’s the Media Queries spec, it’s pretty readable:

• http://www.w3.org/TR/css3-mediaqueries/

Solution 2:

It's limiting the styles defined there to the screen (e.g. not print or some other media) and is further limiting the scope to viewports which are 1024px or less in width.

http://www.css3.info/preview/media-queries/

Solution 3:

It says: When the page render on the screen at a resolution of max 1024 pixels in width then apply the rule that follow.

As you may already know in fact you can target some CSS to a media type that can be one of handheld, screen, printer and so on.

Have a look here for details..

Solution 4:

In my case I wanted to center my logo on a website when the browser has 800px or less, then I did this by using the @media tag:

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

It worked for me, hope somebody find this solution useful. :) For more information see this.