問題タブ [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.
css - CSS で % の代わりに ems を使用する利点は何ですか?
ピクセルやポイントなどの静的な測定値を優先してemを使用する利点は理解していますが、ほとんどの CSS 関係者 (SO を除く)が % 値の代わりにemを使用することを好むのはなぜですか?
css - em ベースのレイアウトの問題
すべての寸法が em で指定されている css を使用してレイアウトを構築しようとしています。これにより、さまざまなフォント サイズ/ズーム レベルでページを同じように表示できるようになるという印象を受けました。ただし、サイズ/ズームが変更されると、テキストの折り返しが異なることに気付きました。
たとえば、この jsfiddleでは、テキストはネイティブ ズームと 1em のフォント サイズで 1 行にすべて表示されますが、2em のフォント サイズで折り返されます。コンテナーの幅が全角であるため、一貫してラップする/ラップしないことが予想されるため、フォントサイズに比例して増加するはずです。
私は何か間違ったことをしていますか、それとも em 測定の有用性を誤解しているだけですか?
html - H2 変換が機能しない
要素を変換しようとしています。フォント サイズの変換は問題なく機能しますが、余白の変換はあまりうまくいきません。
これが私の試みです:
に比べ:
ご覧のとおり、H2 と .box テキストは、ブラウザーで表示すると同じフォント サイズになっています。
これは正しくありません。24px にする必要があります。私が犯した間違いは何ですか?
css - CSS の font-size プロパティで分数 em を使用する
たとえば、次の CSS ルールが定義されているとします。
私の質問は、ブラウザが実際にそれをサポートし、フォントサイズが em の値の小さな部分的な変化に対して異なる方法でレンダリングされるように指定しながら、分数にどのように「深く」行くことができるかということです。
font-size - cssで「em」を使用するとどのように役立ちますか?
フォントサイズには「em」を使用することをお勧めします。使ってみましたが、特にメリットが感じられません。実際、私の同僚は皆混乱していました。
%、em、および px に関するインターネット上の記事をいくつか読みました。彼らは皆emを提案しましたが、私は本当にそれを理解していません. はい、em を使用すると、すべてのフォント サイズを一度に変更できます...そうですか。
いくつかのスマートフォンを試しましたが、すべて問題なく「px」と表示されました...
誰か私を導いてください!
ありがとう
css - ems を使用してサイズを変更すると画像が失われる
テンプレートで奇妙に思える問題が発生しています。ems を使用して画像の高さ/幅を定義すると表示されませんが、ピクセルを使用して画像サイズを設定するとうまくいきます。ems を使用してパディングとマージンを定義しても効果はありません。ページのソースを表示すると、そこに画像があることがわかります。ブラウザが画像のように値をレンダリングしているようです0em
。(h2 p)
興味深いことに、 ems を使用した他の種類の要素のマージンとパディングは機能します。確かではありませんが、問題を em 単位に絞り込むためにかなりの量のテストを行いました。
これは、CSS をインラインに配置しても、リンクされたスタイル シートに配置しても発生します。IE と firefox で発生します。コンテンツ管理システム (Joomla) を使用していますが、別のテンプレートに切り替えると、ems で画像サイズを設定するとうまくいきます。
サイズが em によって定義されている場合に画像が消える既知の競合が CSS または他の場所にあるでしょうか?
html - em単位の背景画像サイズは、ズーム中にサファリで画像のサイズを変更する必要がありますか?
このリンクでは、画像のサイズがem-sによって指定されるため、ズームイン/ズームアウトすると、サファリで画像のサイズが変更されることがわかります。では、背景画像はどうでしょう。ズームイン/ズームアウトしても背景画像が同じサイズのままになるデザインがありますが、背景がそれである div はサイズが柔軟に変更されます。
css - レイアウトにemを使用すると、異なるブラウザ間で不整合が発生します
弾力性のあるレイアウトを使用してサイトを構築しようとしています。Eric MeyerのCSSリセットを使用body {font-size:62.5%}
し、スタイルシートでも使用しました。
編集:これが私のHTML構造とCSSです
<html>
<head>
</head>
<body>
<div id="container">
<div id="gallery">
</div>
<div id="other">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
`html {bacgroound:url()繰り返しなしの上部中央が修正されました;}
`
ご覧のとおり、の幅を固定するとbody
、background
の#other
と#footer
は固定されたままになります。そこで、を設定width
し、ギャラリーとのコンテンツを中央に配置することで、それを回避しようとしました。100%
margin: 0 8em 0 8em
#other
#footer
私が達成しようとしているレイアウトは、基本的に写真のギャラリーを含む1列のレイアウトです。ギャラリー全体をページの中央に配置する必要があります。私はem
定義margin
に使用しましたが、これによりブラウザごとに異なる結果が発生します。ギャラリーが1つのブラウザーの中央に配置されている場合、他のブラウザーは異なる結果を表示します。Firefox、Chrome、IE9を試しました。
em
測定単位として使用して同一のレイアウトを作成する方法はありますか?または、固定レイアウトを試して、px
代わりに使用する必要がありem
ますか?
css - CSSのemとenの違いは何ですか
私はいくつかの(問題のある奇妙な)cssを使用しています.enとemの違いは何ですかfont-size:12en; height:3em;
?
css - CSS3 ドロップ キャップが IE9 で em パディングで間違って配置される
これは、私がなんとか解決できたので、他の何よりも興味深い問題ですが、完全に満足できる解決策ではありません。問題をよりよく理解するために、なぜ問題が発生するのかを知りたいです。
CSS3 疑似セレクターを使用して、最初の文字にドロップ キャップを付けた段落がいくつかあります。これは、FF、Opera、および Safari では問題なく表示されますが、IE9 では表示されません。問題は、文字を配置するためのパディングとして使用している em 単位です。これらを px に変更すると、文字はすべてのブラウザで正常に表示されます。しかし、テキストに px と em を混在させることに満足していません。これは、IE9 が em 単位をレンダリングする方法と関係があると思います。
ここで jsfiddle を作成しました: http://jsfiddle.net/C5zsv/
HTML:
CSS:
洞察をありがとう!:)
BRgds