使用CSS @media设置断点以响应屏幕尺寸

Question

I'm setting breakpoints in css using '@media only screen and (max-width: 500px)'.

When I set it to change colour upon reaching the breakpoint it works:

@media only screen and (max-width: 500px) {#container{color:black;}}

the container div does go black when I resize the browser, however when I set the breakpoint to change the margin of the div the breakpoint is not triggered.

So when I set the query to:

@media only screen and (max-width: 500px) {#container{margin-left: 0px;}}

nothing changes when the screen is resized in exactly the same way as when I resized when testing for colour change.

the main css file sets #container at margin-left; 18% and when this is changed manually to 0px it does shift the document all the way to the left of the viewport

I've tried various different styles and html elements but colour changes seem to be very reliable, they work in pretty much any combination, but resizing divs or repositioning does not seem to work at all. Why might this be?

Answer:

I was putting my @media query at the head of my css file , when I moved it to the foot of the css file it now resized. It leaves the question though, why did it change the colour at the head of the file but not resize?

Answer 1

You can change margins just as reliably as you can background colours through media queries.

See this for example:

http://jsfiddle.net/Q55MC/

#container {background: blue; margin: 50px; width: 200px; height: 200px;}

@media only screen and (max-width: 500px) {
    #container{background:black; margin: 0px;}
}

Try creating a demo so that people can have a better idea about what your trying to achieve.

Answer 2

It looks like the 18% style is taking precedence.

Try to override it with this:

@media only screen and (max-width: 500px) {#container{margin-left: 0px !important;}}

Answer 3

Would the @viewport meta declaration help?

Elegantly Resize Your Page With the @viewport CSS Declaration

be aware that this post uses @-viewport when it should just be @viewport