使用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文件在左边距设置#container； 18％，当手动将其更改为0px时，确实会将文档一直移到视口的左侧

我尝试了各种不同的样式和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;}
}

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

Answer 2

看起来18％的风格占了上风。

尝试使用此方法覆盖它：

@media only屏幕和（最大宽度：500px）{#container {margin-left：0px！important;}}

Answer 3

@viewport元声明会有所帮助吗？

使用@viewport CSS声明优雅地调整页面大小

请注意，该帖子在应为@viewport时使用@-viewport @viewport