How to use css media queries correctly for responsive design

问题

I have an issue with media queries. I want my main div to have a width of 960px but if the screen is smaller than 960 px - I want it to be 80% of any current width.

I get only 80% from 960px and not 80% out of everything smaller (for example: 80% of 800px, 80% of 700px).

HTML:

<body>
    <div class="main">
         Some big amound of text
    </div>
</body>

CSS:

body{
    width:100%;
}

.main {
    display: block;
    height: 600px;
    width: 960px;
}

@media (max-width: 960px) {
    .main {
        width:80%;
    }
}

I want it to be fluid but it is fixed only on 2 positions: 960px and 80% of 960px - how do I make it fluid?

回答1:

For the sake of anyone else who finds this -- Firefox has supported media queries since version 3.5. I'm not sure why your copy of FF5 wasn't working, but it wasn't due to a lack of media query support. Here's a demo page. I tested it in FF3.6, and it works fine: http://oscorp.net/experiments/media-queries/