px(ピクセル) ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとした豆知識をご紹介します。 ピクセルは、画像と要素という単語で構成されています。ピクセルは絶対的な自然長の単位ではありません。たとえば、同じ 1 ピクセルのサイズの「自然長」は、デバイスによって異なります。画像を拡大すると、画像が小さな正方形で構成されていることがわかります。各小さな正方形は 1 ピクセルです。ズームが大きくなるほど、1 ピクセルの自然長が長くなります。したがって、同じ自然長の画像に含まれるピクセルが多いほど、画像は鮮明になります。 それら 現在のオブジェクト内のテキストのフォント サイズに対する相対値です。1em=100% というパーセンテージ単位としても理解できます。では、CSS スタイルで em がどのような効果をもたらすかを見てみましょう。 現在の子要素にフォント サイズが設定されていない場合 (ブラウザーのデフォルトのフォント サイズは 16 ピクセル)、子要素がフォント サイズを設定します。 p{ フォントサイズ:1.5em; } div{ フォントサイズ:1.5em; } <div> <p> フォントサイズ</p> </div> ここでの「フォントサイズ」は1.5 x 1.5 x 16 = 36pxです 親要素のフォント サイズは子要素に継承されますが、継承される値は em 値ではなく px 値です。どのように理解すればよいでしょうか? <本文> <div> <p></p> </div> </本文> そして、bodyのサブ要素divとpは両方とも32pxです(重なりません) レム こちらもemと同様にフォントサイズに対するパーセンテージですが、参照対象が異なります。remの参照対象は親要素ではないため、親要素がどのように変化しても、現在remに設定されている要素のフォントサイズは反応しません。 rem はルート要素 (つまり html) を基準とします。html ドキュメントを作成する場合、head と body の両方が <html></html> タグで囲まれます。 CSSスタイルではHTMLのフォントサイズを変更することもできます html{ フォントサイズ:10px; } div{ フォントサイズ:2rem; } この時点で、div のフォント サイズは 20 px です。 CSS スタイルで行の高さに数字を直接書き込む これは ただし、上記の単位設定以外にも、 line-height では、em も現在のフォント サイズに対する比率であり、px の固定値を継承します。子要素は em の値を継承しません。 ただし、 要約する CSS でよく使われるフォント サイズの単位と行の高さに関するこの記事はこれで終わりです。CSS のフォント サイズと行の高さに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: CentOS 上の Docker に Jupyter をインストールしてポートを開く方法
>>: html5 の新しいメソッドを使用して JavaScript で要素クラス名を操作する方法の詳細な説明
この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...
<br />123WORDPRESS.COM の以前のチュートリアルでは、Web ページ...
私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...
MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...
WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...
序文多くのサイトが、ポイントやゴールドコインなど、情報のダウンロードに料金を請求していることは誰もが...
この記事の例では、テーブル行データのスクロール効果を実現するためのjQueryの具体的なコードを参考...
最近、宿題をしているときに、iframe を使用せずにページをネストする必要があったため、jquer...
目次序文電話使用法成し遂げるシンプルな実装バージョン:アップグレード版:適用する使用法成し遂げるバイ...
背景私は新しいプロジェクト チームに配属されたので、プロジェクトでは js を使用する必要があります...
まずプロジェクトの成果物を構成するスタートアップ項目の設定 Tomcatサービスを作成する開始したい...
HTML には、幅の異なる 5 つのスペース エンティティが用意されています。非改行スペース ( )...
1. ブロックレベル要素: 独立して存在できる能力を指します。通常、ブロックレベル要素は改行によって...
プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...
この記事の例では、WeChatアプレットで画像コントロールを選択するための具体的なコードを参考までに...