16

私たちの会社のサイトをより応答性の高いものに変換することに取り組んでいるので、試行錯誤の代わりにcssを使用するように作り直しています。empx

私が直面している問題は、この問題の継承でfont-sizeあり、この問題のベストプラクティスを探しています。

これが私が今のところ問題を解決している方法です。

あなたの視聴の喜びのためのjsfiddle

HTML

<h3>Heading with a <a href="#">Link</a></h3>

<p>this is a paragraph with a <a href="#">Link</a> inside of it</p>
<a href="#">this is a link outside the paragraph</a>​

CSS

body {font:normal 100% sans-serif;}
p {font:normal 1.5em sans-serif; margin-bottom:.5em;}
h3 {font:bold 3em serif; margin-bottom:.5em; }
a:link {font-size:1.5em;}

p a, li a, h1 a, h2 a, h3 a, h4 a, h5 a,
h6 a, dl a, blockquote a, dt a, dd a, td a {
    font-size:1em !important;
}

em'は親に関連していることを理解していfont-sizeます。ですから、私が設定p{font-size:1.5em;}し、また設定a:link{font-size:1.5em;}し、私<a>の外にいる<p>場合、それらは同じ相対的なサイズになります。

しかし、<a>内部に配置する<p>と、埋め込みのフォントサイズは、より<a>も1.5em大きくなるため、大きくなり<p>ます。これを克服するために、最後のスタイルを。の文字列で設定しましたp a, li a, h1 a,......{font-size:1em !important;}。使用しなければならなかった（のファンではない）a:linkよりも特異性が高いので、サポートしなければならないので使用できません、あえて言います（まだ15％のトラフィックがあり、私たちはバイオテクノロジーであり、一部の企業は拒否します改良する）。p a!important!importantfont-size:inherit;ie6

だからあなたへの私の質問はこれです。タイポグラフィが壊れないように、タグ内のタグに取り組む際にこれを正しい方法で行っていますか？私が自分で考えた最後のスタイルを書くとすぐに、これは維持するのが悪夢になる可能性があります！使用したいremのですが、一部のユーザーにはブラウザサポートがありません。

自分のCSSでこの問題をどのように解決し、これに対する「ベストプラクティス」アプローチは何でしょうか。

4

3 に答える 3

10

見出しやナビゲーションブロックなど、ブロックのみのフォントサイズを設定します。フォントをインラインで変更すると混乱が生じるため、リンクなどのフォントサイズを設定しないでください。代わりに、必要に応じて、ナビゲーションリンクを含むulまたはまたはその他の要素のフォントサイズを設定します。div

font-size一般に、望ましくない累積的な影響のリスクを最小限に抑えるために、できるだけ少ない設定を使用します。

ノート：

これは相続についてではありません。要素に設定font-sizeすると、その要素は確かにフォントサイズを継承しません。emこれは、ユニットの相対的な性質の影響についてです。

a:link{font-size:1.5em;}たとえば、設定した場合は、を使用せずに段落内のリンクを簡単にオーバーライドできます!important。もっと具体的にする必要があります。ここでの自然な方法はですp a:link{font-size:1em;}。

于 2012-04-25T04:12:41.320 に答える
4

おそらく、を選択するのを避けa、コンテナから継承するサイズとは異なるサイズにする場合は、より具体的なセレクタを追加する必要があります。だけのフォントサイズを変更することはありませんa。代わりに、必要に応じてコンテナのフォントサイズを変更します。同様に、同じ理由で、他のインライン要素（span、em、strongなど）にフォントサイズを追加することは避けています。

于 2012-04-25T00:46:13.110 に答える
1

すべての要素を継承するようにフォントを設定するEricMeyerのreset.cssなどのリセットスタイルシートを使用することをお勧めします。次に、デフォルト（または「メイン」）のフォントサイズをに設定しbody、相対em単位を使用して他のすべての要素のフォントサイズを設定します。

ヘッダータグなど、テキスト以外のものを含む要素に新しいフォントを設定する必要はめったにないため、相対的なフォントサイズの「スタック」の問題は問題になりません。例外的な状況では、相対的なフォントサイズを意図し、サイトの資産にする必要があります。たとえば、すべてのテキストをサイトのデフォルトより少し小さくする必要があるフッター領域などです。

相対的なフォントサイズが望ましくない動作を引き起こす（まれな）ケースでは、いつでもこれを行うことができます：

p
{
    font-size: 1.5em;
}

a
{
    font-size: 1.5em;
}

p a
{
    font-size: 1em;
}
于 2012-04-24T23:34:12.093 に答える