7

私は可能な限りレスポンシブな Web サイトをデザインしようとしました (iPhone 用に特別なスタイルシートを設定することを除いて)。そのために、すべてのフォントサイズを「em」に設定しました。私たちのウェブサイトはテスト開発から公開されたばかりで、同僚の 1 人が自宅のコンピューターからスクリーンショットを送ってくれました。彼の Firefox のベース フォント サイズは 24pt に設定されています。([こちらのスクリーンショットをご覧ください。ユーザーの既定値を上書きするのは良い方法ではないことはわかっていますが、これが主にグラフィックベースのエクスペリエンス (特にフロント ページ) であり、テキストが指定されたボックス内に含まれている必要がある場合は、ご覧のとおり、 font-size を大きくすると、デザインが崩れます。

以下は、css からの重要な抜粋と思われるものです。

body {
    background: white;
    font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-size: 1em;
    color: #858585;
}

.item.news.priority h2 {
    font-size: 1.25em;
}
.item.news h2 {
    font-size: 0.9em;
}

www.loeuf.com でライブにアクセスできます。

あなたの提案は何ですか？本文の font-size をピクセル値で上書きするか、デザインを壊している h2 要素だけで上書きしますか? ベストプラクティスは何ですか?

4

3 に答える 3

7

の使用に関する c_kick のコメントにはある程度同意しますがem、真にレスポンシブな設計の一部は、ユーザー設定が有効になることを可能にすることです。つまり、ブラウザのデフォルトをデフォルトのままにしておくということです。結局のところ、あなたのサイトを見ている人がほとんど盲目で、そのために大きなテキスト サイズを必要としているかどうかはわかりません。したがって、にデフォルトpxを設定するbodyと、そのタイプの「応答性」が無効になります。これは、部分的にあなたが意図したものだと思います。

さて、それを気にしないのであれば、 c_kick のpxベースを設定するソリューションbodyが有効です (そして最も簡単です)。

ユーザーの応答性を維持したいが、グラフィカルにうまく機能させたい場合は、次の 2 つのいずれかを試してみる必要があります (2 つ目は簡単に機能させることができるかどうかはわかりません。それは単なるアイデアです)。 ＃1とは対照的に、動作させることができると確信しています）：

  1. 設定して、フォント サイズに比例して画像をスケーリングできるようにする (em画像のスケーリングに基づくか、テキスト サイズによってコンテナーの高さを駆動し、画像がスケーリングされるようにする)、または...
  2. これらの画像 (テキスト ボックスではない) の周囲にサイズを設定してmargin、画像の周囲の「ギャップ」がテキストのスケーリング方法に比例してスケーリングされるようにします。paddingem
于 2013-01-09T17:40:59.467 に答える
6

font-sizebaseをptで指定し、他のすべてのサイズをemで指定すると非常に便利であることがわかりました。

したがって、たとえば、次の設定を指定します。

html * {
    font-size: 12pt;
}

私は間違いなく、テキストの各文字font-size: 1emが占有することを知っています

12pt = 12 * (1/72 インチ) = 12 * 0.35 mm =幅4.2 mm

解像度に関係なく - 800x600、1024x768または1920x1200です。

width: 10emたとえばボタンを指定すると、このボタンのサイズが12pt * 10 = 4.2mm * 10 = 4.2 cmになることが確実にわかっているため、サイトの設計が大幅に簡素化されました。

また、解像度1920x1200の15インチ モニターでデザインされたサイトは、解像度1024x768の15インチ モニターでもほとんど同じように見えます。これはデザインに非常に便利です。

したがって、現在、私は実際の（物理的な）ディスプレイサイズとアスペクト比だけを気にしています。これは、解像度ほど大きく変化せず、はるかに予測可能です。

于 2014-03-12T16:41:34.857 に答える
0 
body { font-size: 100%;}

@media all and (max-width: 800px) {
   body { font-size: 200%;}
}

If screen is less than 800 the size of font increase 200%

In your example:

body {
    background: white;
    font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-size: 100%;
    color: #858585;
}

.item.news.priority h2 {
    font-size: 110%; /* +10% */ 
}
.item.news h2 {
    font-size: 90%;  /* -10% */ 
}
于 2014-08-03T23:07:38.453 に答える