4

私の要件は、開発者が特定のタグ (<p>など) なしで Web ページの任意の場所にテキストを入力する場合、フォント サイズはタグのフォント サイズと同じにする必要があるということ<p>です。

でfoundation.cssを変更しましたhtml,body { font-size:0.85 }。この編集により、レイアウト全体 (サイト テンプレート全体) が縮小されています。サイズを大きくすると逆になります。

テンプレートに害を与えることなく、独自のデフォルトの本文のフォントサイズを安全に財団に導入する他の方法はありますか?

コンテンツ ラッピング div に新しい font-size 属性を導入せずに私の要件を達成するための提案はありますか?

4

4 に答える 4

13

Zurb は、html の body {} スタイルで指定したフォント サイズを使用して、サイトの幅を計算します。font-size の値を何に設定しても、サイト全体で 1em になります。css のさらに下を見ると、max-width: 62.5em のような .row {} の定義が見つかります。

ご想像のとおり、1em の値を小さくすると、行の 62.5em の値も小さくなります。私は常にsass gemを使用しているので、zurbのcssバージョンでそれを変更することについてはあまり知りませんが、行幅のemの数を調整できます。

試す：

必要なサイトの幅 / 本文のフォントサイズ (px) = 行の最大幅が必要な em の数。

例えば

ベースフォントサイズ12pxで幅960が必要な場合

960 / 12 = 80

したがって、行の最大幅を 80em に設定します。

より良い資格を持つ誰かが来て、より良い答えを出すと確信していますが、それが私がグリッドを理解している方法です.

于 2013-04-03T08:19:57.153 に答える
1

変更するfoundation.cssのではなく、独自の「別の」css ファイルで独自のスタイルを定義してください。たとえば、これを行う場合：

body {
    font-size: 1.5em;
}

次のレイアウトを使用すると、グリッドが引き続きデバイス/ブラウザーの幅に応答することがわかります。

<div class="large-12 columns">    
    <div class="row">
        <div class="large-4 columns">
            <div class="panel">
                <p>Four columns</p>
            </div>
        </div>
        <div class="large-4 columns">
            <div class="panel">
                <p>Four columns</p>
            </div>
        </div>
        <div class="large-4 columns">
            <div class="panel">
                <p>Four columns</p>
            </div>
        </div>
    </div>
</div>

実際の動作はこちら

于 2013-04-02T01:08:58.903 に答える
0

私が考えることができる最も簡単な解決策は、コンテンツ領域 (またはページ全体) の周りにラッパー要素を作成し、次のようにフォント サイズを変更することです。

<div class="content">
<p>My stuff</p>
<a href="#" class="button">A button</a>
</div>

次に、CSS で:

.content * {
font-size: 90% !important;
}

テストされていませんが、過去に同様のことを行ったことがあると確信しています。

于 2014-03-07T02:11:00.260 に答える