問題タブ [em]

最適なフォントサイズとレイアウトサイズについて読んでいます...そしてpxの代わりにemを調べています。

私が理解していることから、私がこのようにcssを作成すると、

ブラウザに16px=1emを強制します。これにより、目的のピクセル/ 16を計算して、幅と高さのプロパティを実行できるようになります。

javascriptを使用してem単位でウィンドウの幅を取得する信頼できる方法を探しています。jQueryがピクセル測定でのみ結果を返すのを見て驚いた。どんな助けでも大歓迎です。

私はいくつかのマークアップを持っています:

<dd>s が s と一致するようにスタイルを設定したいと思い<dt>ます。私のドキュメントline-heightは に設定されてい1.3ます。ems が に等しく、font-sizeそれline-heightが のパーセンテージであることを知ってfont-size、私は試しました:

<dt>データに適切な間隔を与える。これはうまくいきませline-heightん15pxでし1.3emた15.6px。http://www.brunildo.org/test/line-height-approx.htmlによると、異なるブラウザーは異なる方法で行の高さの正確なピクセル値を計算します - 私は Chrome で開発していましたが、それに引っかかったのは幸運でした.

この質問の目的のために、私はピクセルを避けたいと思います -line-heightとmargin-topをピクセルで指定するとうまくいきますが、サイズ変更がうまくいきません。

問題を示す uri を次に示します。

http://jsfiddle.net/mJxn4/

<em>これは非常に奇妙です。タグで数行のテキストをラップしています。私が何をしても、line-height17px未満の値を下げても効果はありません。私は17pxより大きくline-height することができ、それは適用されますが、17pxより低くすることはできません。

問題のCSSは次のとおりです。

線の高さを上下に調整し、変更するたびに更新されたフィドルを実行してみてください。そうすれば、私が何を意味するのかがわかります。

なぜこれでしょうか？CSSの他の場所ではNoline-heightが指定されているため、それをオーバーライドするものはありません。同じセレクター内line-heightで上下を調整しているため、とにかくそうではありませんでした。したがって、高い値が適用されることは意味がありませんが、低い値はオーバーライドされます。

レスポンシブ グリッドを作成し、フォント サイズとして em を使用してテキストのサイズを変更しましたが、テキストのサイズ変更がないため、em がどのように機能するかを完全に理解してはいけません。

ライブサイト: http://www.rubytuesdaycreative.co.uk/testsite/shop.html

イーサン・マルコットの本に従って、本文のフォントを に設定し、font-size:100%上記のリンク先のページの cpation 内のテキストを 2ems として作成しました。つまり、基本サイズを 2 倍にしています...間違っていますか? 全然変わらないようです。

http://jsfiddle.net/jm3sK/

画像ごとにテキスト ボックスを含むカルーセルがあり、クライアント (HTML について何も知らない) は、WYSIWYG テキスト エディターを使用してテキスト ボックスを編集します。結果の出力は、最悪の悪夢に似ています。何かのようなもの：

このサイトは、小さいモニターに対応するために 3 つの異なるサイズで表示する必要があるため、CSS メディア クエリを使用してサイトのサイズを変更しています。

テキストボックス内のテキストのサイズを正しく変更できません。jQuery.fn.cssの各要素のフォント サイズを取得しpx、それを に変換するために使用しようとしましたem。次に、 にfont-size:x%一種の宣言を設定する.carousel-text-containerことで、すべてが適切にサイズ変更されることを期待しました。

残念ながら、em での font-size の適用方法には再帰的な性質があるようです。つまり.example、親も影響を与えているため、以下では適切にサイズ変更されません

のすべての子に対して、元のフォントサイズ、マージン、パディング、行の高さなどの真の割合を達成できるように、すべてを確実かつ正確にサイズ変更するにはどうすればよい.carousel-text-containerですか?

今、私はある種の再帰的な JavaScript 関数を想像している段階です。

更新: クライアントが特定の単語のサイズを変更して見出しなどに使用できるようにしているため、単純にすべてを単一のフォント サイズに設定することはできません。

HTML5 キャンバス内に配置して、スナップショットを取得したり、そのようにサイズ変更したりすることは可能でしょうか?

高度なスキルを持つ Web デザイナー/開発者がフォント サイズやマージン、パディングに em 単位を適用するのを何度も見てきましたが、要素の高さと幅にも em 単位を適用できることを知りたいです。または、その上のピクセルに固執することもできます。

私はすべてemベースのコーディングを行ってきたので、要素を調べて幅を取得するときpxは、計算を行うための追加の手順にすぎません。Chromeデベロッパーツールで単位をからpxに変更することはできますか？em

編集：アップロードされた画像

レスポンシブ サイトを構築しており、新しい css3 ユニット - remを使用したいと考えています。

html タグのベース フォント サイズを に1rem設定16pxし、body を 62.5% に設定しましたが10px、Chrome コンソールで計算されたスタイルを見ると、 body が表示されますfont-size:12px。

を使用してボディを設定しようとしまし0.625emたが、それでも同じ結果が得られました。何が欠けていますか?

ここで例を見ることができます: http://jsfiddle.net/pPmBm/2/

編集：

FFでテストしたところ、正常に動作しているように見えるので、クロムの問題のようです。

レイアウト上のページ間でフォント サイズを比較する際に問題が発生しています。本文にfont-size: 100%;を使用し、段落タグに を使用してフォントを設定していますfont-size: 1em;。

CSS 列と 1 列のレイアウトで設定された 2 列のページがあります。1 列のページでフォントが大きく表示されます。またfont-size: .75em;、フッターとサイトのメイン セクションでレンダリングが異なります。

これは Chrome のみであり、Nexus 7 で問題が発生しているように見えると判断しました。この問題は、iPad 3 の Chrome では問題ありません。

誰もこれについて経験がありますか？