2

ems 単位を使用してモバイル開発用にフォント サイズをスケーラブルにすることが提案されている記事を読みました。

html {
    font-size: 16px; /* our base font size */
}
body {
    font-size: 62.5%; /* now our em = 10px */
}
/* and for example we want to make h1 = 30 pixels */
h1 {
    font-size: 3em; /* target / context = 30 / 10 = 3
}
/* quite ugly in some cases */
h3 {
    font-size: 0.6666666em; /* want 20 pixels, context 30 = 20/30 = 0.(6) */
}

これはもちろんクールです。問題は、CSS の前処理 (SASS、LESS、カスタム) を使用している場合、おそらくそのようなアプローチは必要なく、変数を直接使用できるということです。

$base-font: 10px;
h1 {
    font-size: $base-font*3;
}
h3 {
    font-size: $base-font*2; /* it could be $base-font/3, still nice */
}

2 番目のオプションの方がはるかに優れているように思えますが、何か不足していますか?

フォントサイズを変更するための単一のポイントを持つという両方のオプションのアイデアですよね?

4

3 に答える 3

8

2 つのアプローチを組み合わせてみませんか？このようなもの：

$base-font: 1em;

html {
    font-size: 16px; /* our base font size */
}
body {
    font-size: 62.5%; /* now our em = 10px */
}

h1 {
    font-size: $base-font*3;
}
h3 {
    font-size: $base-font*2;
}

そうすれば、 の適切なスケーリングを維持しemながら、長い数値を作成するすべての作業をプリプロセッサに任せることができます。コメントで説明したように、フォント サイズだけでなく、要素全体をきれいに拡大縮小するために、マージン、パディング、および境界線で同じことを行うことができます。

もう 1 つ注目すべき点はrem(root em) です。詳細については、 http://snook.ca/archives/html_and_css/font-size-with-remを参照してください。

于 2012-07-31T10:57:14.363 に答える
1

ユーザーにアクセシビリティの問題があり、ユーザーエージェントスタイルシートでより大きなベースフォントを設定したい場合、emベースのサイズはそれに応じてスケーリングされますが、pxベースのサイズはスケーリングされません。

于 2012-07-31T09:44:15.617 に答える
1

Fluidizer SASS ライブラリを使用することもできます。emピクセル単位で考え、percent柔軟な単位で値を取得することを目的としています。私はその開発者ですが、あなたの状況では非常にうまく機能すると思います。

これが例です。最初の引数としてピクセル単位の目的のサイズの関数をem使用em()し、2 番目の引数として関連するフォント サイズ (コンテキスト) を使用します。

$initial-rfs: 16px;
html {
    font-size: $initial-rfs;
}
body {
    font-size: em(10px, 16px);
}
h1 {
    font-size: em(30px, 10px);
}
h3 {
    font-size: em(20px, 30px); /*did you said your context was 30px? are you sure? h3 inside h1? I think its context would be better 10px, them em(20px, 10px)*/
}
于 2012-08-01T14:30:16.520 に答える