3

私は小さなvCardsWebサイトを開発しています。応答性とグリッドのベースとして、TwitterBootstrapLESSファイルを使用しています。

以前に問題が発生しました。グリッドが応答しませんでした（スタックオーバーフローの質問）。その回答に基づいて、応答機能を取得するには、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) { }TwitterBootstrapもその一部です。そのルールのCSSがあります。これは、超えた場合にのみ適用され、超えた場合には適用され410pxません。

誰かが以前に同じ動作に遭遇したことがありますか？もしそうなら、それに対する修正はありますか？

編集：あなたが探すべきCSSの変更は、フォントサイズと見出しのマージン/パディングです：

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

上記のテキストは、少し奇妙な動作をするテキストになります。

4

2 に答える 2

1

<h1>見出しが応答しないことについて話している場合は、 slabTextを使用するか、ラッパーで修正できます。

于 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 に答える