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 で要素クラス名を操作する方法の詳細な説明
カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイント...
目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...
この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...
ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.17-wi...
操作効果: html <!-- この要素は表示されません。DOM は JavaScript に...
目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...
MySQL の外部キー制約は、2 つのテーブル間のリンクを確立するために使用されます。 1 つのテー...
JSON は、言語に依存しないテキスト形式を使用する軽量のデータ交換形式で、XML に似ていますが、...
オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...
適切なデータベース仕様は、ソフトウェア実装の複雑さを軽減し、通信コストを削減するのに役立ちます。この...
簡単に言うと、今日は Gitlab-CI を使用してリモート サーバーに自動的にデプロイする方法につ...
HTML はタグと属性で構成されており、これらを組み合わせてブラウザにページの表示方法を指示します。...
MySQL の replace と replace into はどちらも頻繁に使用される関数です。r...
Win10 のインストール (すでにインストールされている場合はスキップしてください) win10...
目次序文フロントエンドモジュール開発の価値厄介な名前の競合面倒なファイル依存関係モジュール化の利点C...