html - 使用 CSS @media 设置断点以响应屏幕大小

Question

我正在使用“@media only screen and (max-width: 500px)”在 css 中设置断点。

当我将它设置为在到达断点时改变颜色时，它起作用了:

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

当我调整浏览器大小时，容器 div 确实变黑了，但是当我设置断点以更改 div 的边距时，不会触发断点。

所以当我将查询设置为:

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

调整屏幕大小时，与我测试颜色变化时调整大小时的方式完全相同，没有任何变化。

主 css 文件在 margin-left 设置#container； 18%，当手动将其更改为 0px 时，它确实会将文档一直移动到视口(viewport)的左侧

我尝试过各种不同的样式和 html 元素，但颜色更改似乎非常可靠，它们几乎可以在任何组合中使用，但调整 div 大小或重新定位似乎根本不起作用。为什么会这样？

回答:

我将我的@media 查询放在我的 css 文件的头部，当我将它移动到 css 文件的底部时，它现在调整了大小。但它留下了一个问题，为什么它改变了文件头部的颜色而不是调整大小？

Answer 1

您可以像通过媒体查询更改背景颜色一样可靠地更改边距。

例如看这个:

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;}
}

尝试创建一个演示，以便人们可以更好地了解您要实现的目标。