0

我使用'@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设置在margin-left；18%，当手动更改为 0px 时，它确实将文档一直移动到视口的左侧

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

回答：

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

4

3 回答 3

2

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

例如看这个：

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

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

于 2014-06-10T22:16:50.687 回答
0

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

尝试用这个覆盖它：

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

于 2014-06-10T22:25:16.837 回答
0

@viewport 元声明会有帮助吗？

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

请注意，这篇文章@-viewport应该在什么时候使用@viewport

于 2014-06-10T22:26:14.030 回答