宽度不会根据媒体查询响应

Question

I was experimenting with media queries to see the effects. So I tried using min-width(480px) query to change the width of a div from 100% to 520px when the window was maximised but the width of the div stays 100% .

The code:

#box {
    margin: auto;
    background: white;
    width: 100%;
}
// Media Queries
@media only screen and (min-width: 480px) {
    #box {
        width: 200px;
        max-width: 200px;
        background: black;
    }
}

So my question is, why does the width of the #box stay as 100% when the window is maximised ?
What am I doing wrong?

Answer 1

jsFiddled here is your code with min-width:480px. It applies when the size of available space is bigger than 480px (the black box)

try max-width . This context will apply when available screen space is less then 480 pixels. jsFiddled here , black box will be applied when available space width is lesser than 480px

@media only screen and (max-width: 480px) {
    #box {
        width: 200px;
        max-width: 200px;
        background: black;
    }
}

So, your #box is by default 100% width except when the available space is greater than 480px. your code is working OK.

Maybe it's the comment : // Media Queries witch caused an error ?

Answer 2

I think you have the media query wrong. As you have it now, it's changes the content over 480px. Where I think you want it under 480px.

So it should be:

@media only screen and (max-width: 480px) {
  //code
}

Hence, ( max -width: xxx) not, ( min -width: xxx) .

Example fiddle

Answer 3

I had commented the code using // syntax by accident which isn't supported in CSS, hence the code below that line of comment not working. It now works after I changed it /**/ syntax.