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

【问题标题】：Setting Breakpoints to respond to screen size using CSS @media使用 CSS @media 设置断点以响应屏幕大小
【发布时间】：2019-08-24 13:14:38
【问题描述】：

我正在使用“@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 时，它确实将文档一直移动到视口的左侧

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

答案：

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

【问题讨论】：

给出的代码中其他宽度没有边距。
在这种情况下，#container 必须已经有 0 像素的左边距，所以没有什么可以改变的。
抱歉，#container div 设置为 'margin-left: 18%;'当我手动更改 css 以便将常规 #container div（不是 @media 查询中设置的那个）设置为 0px 时，它会一直移动到视口的左侧

标签： html css breakpoint-sass

【解决方案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;}
}

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

【讨论】：

当我将 @media 查询放在主 div 的底部时，我将它放在所有主 css 的脚下，它现在在到达断点时重新定位 div

【解决方案2】：

看起来 18% 的样式占了上风。

尝试用这个覆盖它：

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

【讨论】：

【解决方案3】：

@viewport 元声明有帮助吗？

Elegantly Resize Your Page With the @viewport CSS Declaration

请注意，这篇文章使用 @-viewport 而应该只是 @viewport

【讨论】：