Media Queries: Screen > 1024

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

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/

@media not working with width less than 1024px

Every rule in CSS is able to override any previous rule to the same selector. So you just need to switch your code in order to get it working:

@media (max-width: 1023.9px) {
  width: 33.3333%;
}

// experimental
@media (max-width: 1000px) {
  width: 50%;
}

@media (max-width: 768px) {
  width: 50%;
}

@media (max-width: 599px) {
  width: 100%;
}

//
@media (min-width: 1024px) {
  width: 25%;
}

The reason why your rules override each other is because they all have the same selector and while max-width: 599px is accurate and correct, the later appearing max-width: 1023.9px is it, too and thus it’s overriding the previous width: 100%; from the max-width: 599px media query.

And a side note here: Use integer values only for media queries. There is no screen in the world, which has .9 or even .5 pixels.

Responsive CSS - Target 1024 x 768 Screen Size Only

Use for desktop:

@media (min-width:769px) and (max-width:1024px){
    // your code
}

Use for tablet:

@media (min-device-width:769px) and (max-device-width:1024px){
    // your code
}

Media query that targets 1024px but displays differently for desktop and tablet? Possible?

You cannot do what you want in pure media query CSS. Basically, you can target tablet beyond just the screen size:

Touch Support

CSS4 gives media queries a new touch option. Since this isn't supported very widely yet you can use Modernizr. It will add a class to the root html of "touch" or "no-touch". You can then use that to target touch devices. Example:

html.touch .someToolbar {display: none;}  //hides toolbar on touch devices

User Agent

Using javascript detect the user agent and load the appropriate css or just make the style changes if they're small

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { /* do tablet/mobile specific things */}

Resolution

If you want to target a specific screen size. For example, I want anyone running 1024 with 11inch or smaller screen

@media 
    only screen and (oriantation: landscape) and (device-width: 1024px) and ( min-resolution: 116dpi),
    only screen and (oriantation: portrait) and (device-height: 1024px) and ( min-resolution: 116dpi), {
   //targets specifically 1024 width with screen size 10 inch or smaller
}

NOTE - I have not used the resolution method, testing needed.

---

Related Topics