問題タブ [em]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
13672 参照

css - CSS スタイル - パーセンテージ vs em vs px?

Web でいくつかの記事を読んだ後、いつ 、または 、 、 などを使用するかpercentについてem少しpx混乱div´sinput´sました...font´sbuttons

私が取り組んでいるサイトでは、レスポンシブ デザインを追加したくありません。また、さまざまな記事から理解していることから、パーセントよりも と を使用する方法の方が適切elementsですdiv´spxしかし、レイアウトを使用pxし、デバイス/画面の解像度に応じて異なる幅、高さを設定するよりも、レスポンシブデザインを取得できるはずだと考えているため、混乱するよりも...?

また、いつ何を使用するかについてのベストプラクティスはありますか? フォントサイズだけでなくdiv´s、他の要素も?

0 投票する
2 に答える
919 参照

html - em を使用したフォントのサイズ変更 - base-size = 0 の場合は?

重複の可能性:インライン ブロック リスト項目の
不要なマージン インライン ブロック リスト項目
間のスペース

liに設定する間のギャップを避けるために、display: inline-blockのフォント サイズulを 0 に設定しました。したがって、em サイジングの性質上、0 がすべての基本フォント サイズとして渡されるようになりましたli。彼ら。

font-size: 14px(たとえば)リスト項目に設定せずにこの問題を解決する方法はありますか?

0 投票する
3 に答える
1270 参照

html - IE7 IE8レイアウトでEMを誤って解釈しますか?

Webサイトはwww.holmecourt.comで、SafariとIE9で意図したとおりにレンダリングされます。このスクリーンショットは、Safariで直接表示されます。これは、Adobe Browserlab for IE9でもまったく同じように見えます:http://holmecourt.com/ images / scrn1.png

ただし、問題は、BrowserlabがIE8を次のように表示することです。IE7は非常によく似ています:http://holmecourt.com/images/scrn2.png

以前はどこでもピクセルを使用していたときにIe7/8はうまく表示されていましたが、すべてをemsに変更したため、IE7/8はそれを好まないようです。

emでIEのバグを検索しましたが、見つかりませんでした。IE7/ 8がemをレイアウトでレンダリングする方法に既知のバグがあるかどうか疑問に思いましたか?

そうでなければ、より経験豊富な開発者がスクリーンショットを比較するだけで気付くかもしれない何かがあります、私はレイアウトが壊れているだけでなく、テキストが正しくサイズ設定されていないことに関連しているかもしれないと思いました、それでおそらくフォントサイズが継承される問題ですか?

私は曖昧にならないように努めましたが、この投稿が曖昧であれば、間違いなく言い換えることができます。

ソースからアクセス可能なすべてのCSSですが、必要なコードを提供できます。

感謝する助けや、感謝する問題を探すためのアイデア!

0 投票する
3 に答える
560 参照

html - javascriptを使用して、自動生成されたHTMLのフォントサイズをpxからemに変更します

HTML制御できない Web サービスから生成された があります。のHTMLフォント サイズはpxとにありptます。私の要件は、すべての font-sizes を に変更することですem

これは私が試したものです:

<font>を使用してすべてのタグにアクセスしようとしました:

nullただし、に多くのフォントタグがあるのに戻ってきますHTML

CSS私が読んだすべての関連情報源は、私たちが制御できるか、またはHTML私の問題には当てはまらないと想定しています。

要するに、を解析してHTMLすべてのインライン スタイル (font-size) を見つけ、他のタイプからem.

0 投票する
2 に答える
2534 参照

css - display:inline-blockおよびemsを使用して、フォーム要素を送信ボタンと整列させる

私はレスポンシブフォームデザインに取り組んでいます。絞り込まれたコードは以下のとおりです。SENDボタンが他の入力フィールドと正しく整列しないのはなぜですか?

フォームラベルにも5emmargin-left:5emがあるので、他の入力フィールドと並べる必要があるaを使用していますが、そうではありません。width代わりに、ボタンは左にオフセットされています。私は何が欠けていますか?ありがとう。

0 投票する
0 に答える
591 参照

css - Mac 上の Chrome のレンダリング フォント サイズが一貫していない

同じ OS (10.7.5) と同じバージョンの Chrome (24.0.1312.57) を実行している 2 つの異なる Mac で問題が発生しています。本文のフォント サイズが 5% 増加しているように見える非常に奇妙な現象が発生しています。また、コピーの一部の行が少し大きく見え、画像/背景画像が適切なコンテナーを満たしていないことにも気付きました。body { font-size: 100%; }このサイトは、その他すべてに emを使用してコーディングされています。問題が発生していたコンピューターからテストを行い、本文のフォント サイズを 95% に変更すると、すべてが一貫して表示されました。

編集:下の写真の例。このフィドルを使用してテストシナリオを作成できました

2 番目の画像では、em のボックスが 400px の下線を超えています。フォントサイズ100%で25em=(400px/16)とします。3 番目の画像では、フォント サイズを 95% に縮小し、400px が 25em になりました。

ここに画像の説明を入力 ここに画像の説明を入力 ここに画像の説明を入力

何か案は?

0 投票する
1 に答える
191 参照

responsive-design - タイプ以外のレスポンシブ スタイルに em を使用する

ときどき、メディア クエリ内の 1 つの変数を変更して、

HTML:

LESS (機能しません):

もちろん、コンパイル時に@baseが設定され、すべてのクラスに適用されるため、これは機能しません。ただし、この汚い回避策に出くわしました:

以下:

要素に実際にテキストがないと仮定すると (または、テキストがリーフ ノードでのみ発生し、フォント サイズを明示的に設定する)、このアプローチを使用することの深刻な欠点はありますか?

0 投票する
0 に答える
3214 参照

css - Em/Rem Vs Px ジレンマ

私は長い間取り組んできたすべてのサイトで、すべてのサイズにピクセルを使用してきました (+ あちこちで数パーセント)。

時々、私は em と rem に関するものを目にし続け、それらをピクセルで使用するかどうかについて悩んでいます。

私が読んだことから、それらを使用する最良の方法は、要素の font-size を 62.5% に設定<html>して 1em を 10 ピクセルに等しくし、それに関連してフォント サイズを指定することです。

ここにいる人々が私に答えてくれることを願っています。

  • em/rem を使用していて、サイトを構築していて、このテキストは 20px にする必要があり、それを 2em に変換すると、そもそもピクセルを使用しないのはなぜでしょうか?

  • 寸法に em を使用し、画像の背景サイズを追加したい場合、ピクセル セットの寸法があり、それを em で設定し、ユーザーがズームすると、レイアウトが壊れませんか?

emを使用すると、アプリケーション全体の相対的なフォントサイズを1か所で変更できることを読みました(これは素晴らしいアイデアであり、非常に便利です)が、htmlタグの62.5%を変更すると、1emは変更されませんもはや 10px に等しいので、以前に設定した簡単さは完全に窓の外に出ます。

あなたが持っていて、<div>その背景画像を特定の寸法で以前に作成した画像に設定し、左側に特定のパディングが必要であるとします。適切な寸法とパディングをすべて em と次に、誰かがズームすると、ボックスの寸法と慎重に作成された左のパディングがすべてウィンドウから完全に消えるため、これは確実に壊れます。

このsass mixinも見ました:

確かに、誰かがピクセル バージョンを使用するブラウザーでズームインし、それを誰かが rem バージョンでズームインした場合と比較すると、結果は異なります。????

これについていくつかのことを明確にしていただければ幸いです。ここに投稿する前に、これらすべてについてたくさんのことを読んだので、これを読んで行くことを示す多くのリンクを投稿すると思います. 上記のようにそれらを読みましたが、この投稿以降、上記の質問がまだあります。

0 投票する
4 に答える
1139 参照

css - ピクセル、em、またはどちらも使用しないでください。

CSSで何かについて決定的な答えを得ようとしています。使うべきかどうか悩んでいます

また

また

emまたはを指定しないと言うサイトもいくつかありますpx。その点については、次のように言う必要があります。

また

あなたの見解は?

0 投票する
3 に答える
2780 参照

css - em 単位とパーセントの違いは何ですか?

私はこのトピックに関する多くの記事を読み (そして Q&A を検索しました)、見つけましたが、em 単位とパーセントの違いが何であるかをまだ理解していません。ヘルプ?

PS私はこのコード例を見てきました:

それはどういう意味ですか?いったいなぜ行の高さをフォント サイズのパーセンテージ値に設定したいのでしょうか?