Grow your CSS skills. Land your dream job.

Understanding How To “Speak” Media Queries

  • # January 11, 2011 at 12:42 pm

    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)?

    # January 11, 2011 at 3:31 pm

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".