13

私たちの多くは、CSS の body 要素のフォント サイズを 62.5% に設定することに慣れていることを知っています。これは、1em が 10px に等しいことを意味し、ピクセルを完璧に保つのに役立ちますが、フォントのスケーリングも可能にします。

つまり、6.25% に設定すると 1em = 1px になるということではないでしょうか? 小数をいじるよりも、さらに簡単な変換のようです...

みんなありがとう！私はemとその歴史（デザインの学位）をよく知っていますが、他の人が役立つと確信しています:)

1em = 1px に関しては、これがどのように望ましくないかわかりません。単位 (ポイントかピクセルか) に関係なく、em は正方形であり、誰もタイプを 1px に設定しません (印刷タイプを 1pt に設定する人がいないのと同じように)。さらに、あなたの記事でさえ、ほとんどのデジタル書体では、大文字の「M」は通常 1em よりも小さく、em は単にポイント サイズを反映していることを認めています (48pt タイプは、em に対して 48pt x 48pt の正方形をレンダリングします。 type は 12x12 などを生成します)

さらに、人々がこれを行う理由は、ページ上の他の要素のサイズを設定して、ユーザーがフォント サイズを調整したときにすべてが適切に拡大縮小されるようにするためです。確かに、デフォルトを 16px 以外に設定するごく少数の人は常にいますが、適切にスケーリングされるピクセル パーフェクト レイアウトに支払う価値は十分にあります。

4

9 に答える 9

11

まず第一に、1 em が 10 ピクセルに等しいと仮定しないでください。em 単位は、使用されているタイポグラフィに直接関係しています。誰かが 16 ピクセルのフォント サイズを持っている場合、62.5% は実際には 10 ピクセル (16 * 0.625 = 10) ですが、誰かがデフォルトのフォント サイズを変更すると、これは明らかに変わります。

第二に、ベース ボディに 62.5% を使用するというのは、これまで聞いたことがありませんfont-size。Owen Briggs による Sane CSS Typographyfont-sizeに基づいて、常に 76% を使用しています。

最後に、あなたの質問に答えるために、はい、たとえば 6.25% の font-size を使用して、12em代わりに を使用できます1.2em。しかし、私はこの方法論を強く思いとどまらせます。タイポグラフィーの世界では、1 em は大文字の 'M' の幅を意味します。この方法は、その一般的な慣行に完全に違反しており、将来 CSS を保守する可能性のある人を深刻に混乱させるでしょう。

于 2008-12-22T23:14:05.810 に答える
7

ほぼ間違いありませんが、スケールを制御できなくなります。見出しは通常、ランクに比例して同じサイズを継承することを忘れないでください (つまり<h1>、最大で<h2>わずかに小さくなります)。これらの要素を減らしたい場合は、多くの小数点プレースホルダーで em 値を使用する必要があります。想像してみてください<h4> font-size: 0.005em。

さらに悪いことに、フォントを大きくしたい場合は、font-size: 40emばかげたものを見ている可能性があります。

つまり、1em = 10px は、フォントのスケーリングされた値に対してより実用的です。紙の上では 1:1 の縮尺は理にかなっているかもしれませんが、実用的で保守しやすい CSS にはあまり適していません。

于 2008-12-22T23:01:09.003 に答える
4

とにかく、「62.5%=10px」全体は根本的に壊れています.ブラウザ、ユーザーの設定、特に最小フォントサイズの設定によって、62.5% が 10px である場合とそうでない場合があります。したがって、ピクセルでデザインしてから、62.5% = 10px という前提で ems に「変換」することはできません。これは、デザインが常に壊れてしまうためです。ピクセル パーフェクトなデザインが必要な場合は、ピクセルを単位として使用する必要があります。柔軟なデザインが必要な場合は、Web サイトのさまざまな要素の適切な単位について考える必要があります。テキスト サイズに合わせて拡大縮小する要素には ems、ウィンドウ サイズに合わせて拡大縮小する必要がある要素にはパーセンテージ、要素にはピクセル (画像のように）まったくスケーリングしないでください。

CSS に font-size: 62.5% を含めている人は、基本的に Web のデザイン方法を理解していません。

于 2009-11-17T19:07:14.427 に答える
4

変換はより簡単かもしれませんが、em は本来の意味を意味しません。

1em は、特定のフォントの大文字の「M」の幅に等しいと想定されています。文字 M の幅が 1 ピクセルの場合、フォントは判読不能になります。

http://en.wikipedia.org/wiki/Em_(タイポグラフィ)

于 2008-12-22T23:11:46.547 に答える
4

私は同じことをしようとしましたが、マージンとパディングにレムを使用するという問題に遭遇しました。font-size62.5% に設定すると、これらの問題が回避されます。

たとえば、次の CSS

html { 
  font-size: 6.25% /* 16px * .0625 => 1px */
}

p {
  font-size: 1rem;
  margin:    1rem;
}

次のようにレンダリングします。

p {
  font-size: 1px;
  margin:    9px; /* WTF?! */
}

奇妙ですよね？これは、最小フォントサイズとの奇妙な競合が原因であると想定しています。

font-size: 62.5%一方、使用すると、期待どおりにレンダリングされます。

html { 
  font-size: 62.5% /* 16px * .625 => 10px */
}

p {
  font-size: .1rem;
  margin:    .1rem;
}

次のようにレンダリングします。

p {
  font-size: 1px;
  margin:    1px;
}
于 2014-10-27T15:30:36.173 に答える
4

素晴らしい質問です。

6.25% は、アダプティブ/レスポンシブ Web デザインとエラスティックテンプレートの興味深い提案だと思います。

特に、単位を使用したフォントのサイズ変更は、remそれ自体があなたの議論に役立ちます... 1:1 の比率の方が簡単です。

rem : "root em"... ルート要素のフォント サイズ。 http://www.w3.org/TR/css3-values/

rem次の例を参照してください: http://snook.ca/archives/html_and_css/font-size-with-rem#c67739

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

そして今、あなたの提案で...

html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */
body { font-size: 14px; font-size: 14rem; } /* =14px */
h1   { font-size: 24px; font-size: 24rem; } /* =24px */

... 私の JSBin の例で遊んでください:エラスティック コンテンツの CSS3 "rem" ユニットのテスト

em と px の比率を 1:1 にすると、タイプミスが少なくなります。

REM 注: CSS を適切にリセットし、両方bodyのベースを宣言すると、スタイルが適切に低下します...がサポートされていて、 の後に宣言されている場合、その値が適用されます。それ以外の場合、ブラウザは にフォールバックします。font-sizepxremrempxpx

のサポート (特にモバイル) の決定rem。可能なすべてのブラウザ/デバイスでこのページにアクセスしてください... http://ahedg.es/w/rem.html

于 2011-05-02T07:04:25.310 に答える
0

更新されたバージョンは、http://pixelconverter.kleptomac.comで入手できます。これ は、ピクセル、ポイント、em、パーセンテージを変換するためのオンライン単位コンバーターです。これは、これらの単位のいずれかとの間の変換をサポートします。

于 2010-02-16T07:43:02.010 に答える
0

これも便利だと思うかもしれません。http://pixel2em.kleptomac.com これは、ピクセルから em へのオンライン コンバーターを提供し、完全な CSS ファイル変換も実行できます。

于 2010-01-30T17:36:29.500 に答える