响应式布局 - 媒体查询

Question

当我调整屏幕尺寸时，由h1标签定义的橙色线不会随文本向下移动，而且我向右浮动的橙色框也会在文本后面合并。

我知道我需要以某种方式包含媒体查询，但不知道如何，任何人都可以帮助我吗？

谢谢！

Answer 1

好的，首先我不认为我曾见过任何人在一个页面上使用尽可能多的中断<br>标签，因为你有哈哈。

您的问题的答案是只需使用<hr>标记（水平线规则），无论您想要哪条线。

例如，在关闭时间的div标记后添加<hr>标记。默认情况下，<hr>标记的样式为黑色，因此我们需要在stylesheet.css中添加一些简单的样式

hr {
    border-top: 1px solid #bd6e22;
}

如果您想在上方，下方或两者之间添加间距，请将其添加到样式中。

hr {
    border-top: 1px solid #bd6e22;
    margin: 20px 0;
}

我已经将20px作为示例，但您可以将其更改为您想要的任何内容。

希望这有帮助。

Answer 2

好的，你需要在ftp客户端中打开http://me14evb.leedsnewmedia.net/slate/stylesheet.css。 然后https://css-tricks.com/snippets/css/media-queries-for-standard-devices/对每个分页符大小使用@media quieres并根据每个设备调整样式：D 祝好运！ 克里斯