3

我正在开发一个小型vCards 网站。我使用Twitter Bootstrap LESS 文件作为响应和网格的基础。

我之前遇到过一个问题，网格没有响应（堆栈溢出问题），根据答案，我意识到我必须将responsive.less文件与文件一起包含bootstrap.less才能获得响应功能。

在解决了这个问题之后，我仍然会得到更奇怪的行为：

<div class="headline-container pull-left">
    <div class="headline-inner">
        <h1>Roland Groza</h1>
        <h4>Frontend Developer</h4>
    </div>
</div>

检查 DOM 并查找上述标记。现在，如果您开始将窗口大小调整到最小，在410px和之间514px，您会注意到标记将继承一些应该应用于 MQ 规则的 CSS @media (max-width: 480px) { }，但只是其中的一部分，就像 Twitter Bootstrap 一样该规则有一些CSS，仅在超出410px而不是超出时才应用。

以前是否有人遇到过相同的行为，如果是，是否有解决方法？

编辑：您应该寻找的 CSS 更改是标题上的字体大小和边距/填充：

<h1>Roland&nbsp;Groza</h1>
<h4>&lt;&nbsp;Frontend&nbsp;Developer&nbsp;/&gt;</h4>

上面的文本将是一个有点奇怪的文本。

4

2 回答 2

1

如果您正在谈论<h1>标题没有响应，您可以使用slabText或使用wrapper修复它。

于 2013-01-13T20:32:39.793 回答
0

你的 html 不是你发布的，它是

<figcaption class="headline-container">
<div class="headline-inner">
<h1>Roland&nbsp;Groza</h1>
<h4>&lt;&nbsp;Frontend&nbsp;Developer&nbsp;/&gt;</h4>
</div>
</figcaption>

而且我看不到任何声明 410px 的查询（您说的应该在“超过 410px ”时应用）

你能评论什么是应该应用的规则，而不是什么规则？

于 2013-01-10T09:20:48.287 回答