Question

我正在使用'@media only screen和（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时，它会将文档一直移动到视口的左侧

我尝试了各种不同的样式和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 screen and（max-width：500px）{#container {margin-left：0px！important;}}

Answer 3

@viewport元声明会有帮助吗？

Elegantly Resize Your Page With the @viewport CSS Declaration

请注意，此帖子只有@-viewport

才会使用@viewport

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

3 个答案: