Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Understanding How To “Speak” Media Queries

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #31219
    jimmykup
    Participant

    Hi everyone,

    I’m currently trying to understand @media queries in CSS. My problem right now is that I’m having trouble reading the @media query statements and making sense out of them in English. Take the example below for instance.

    @media (max-width: 1024px) {

    }

    When I read this, I think to myself “everything inside of these curly brackets will take affect when the maximum width of the screen is 1024 pixels wide.” Which to me would mean that if the browser window is only 900px wide that this query is ignored completely. But that’s not true is it?

    How should I be reading this statement and others like it (min-width) so that they make sense? And what is the difference between the above and (max-device-width)?

    #66597
    Chris Coyier
    Keymaster

    If you set a max-width on an element of 500px, it CAN be 400px, or 300px, or anything lower than 500px.

    So for this media query, the rules says:

    “Everything inside of these curly brackets will take affect until the browser is at a maximum of 1024px wide”

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.