ホームページ ウェブフロントエンド htmlチュートリアル px、em、pt 単位間の変換とその違い

px、em、pt 単位間の変換とその違い

Jun 22, 2017 am 11:08 AM
違い 変換する

px、pt、em の違いについて、どの単位を使用すればよいか悩むことがあります。今日いくつかの記事を確認しましたが、より包括的に説明されています。クリックすると原文が表示されます (元の URL は無効です。別のサイトです)

ここで引用した記事は、Jorux の「95% の中国 Web サイトは CSS を書き換える必要がある」です。タイトルは少し怖いですが、確かにいくつかの内容です。現在の国内のウェブページ制作の欠陥。 pxとemの関係や特徴が全く分かりませんでしたが、読んでとても勉強になりました。通常、フォントの定義にはpxが使用されるため、ブラウザのフォント拡大機能は使用できず、ほとんどの海外サイトはIEで利用可能です。理由:

1. IE は px を単位として使用するフォント サイズを調整できません。

2. ほとんどの外国の Web サイトはフォントの単位として em を使用するため、

3. em ですが、中国のネットユーザーの 96% 以上が IE ブラウザ (またはカーネル) を使用しています。

ピクセルは長さの相対単位であり、ピクセルピクセルはモニター画面の解像度に相対します。 (CSS2.0 マニュアルから引用)
em は、現在のオブジェクト内のテキストのフォント サイズに対する相対的な長さの単位です。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。 (CSS2.0 マニュアルより引用)

フォント単位として em を使用すると、IE6 でフォント スケーリングをサポートできます。ページ上で Ctrl+スクロール ホイールを押すと、ピクセル単位のフォントを含む Web サイトは応答しません。

px は絶対単位であり、IE スケーリングをサポートしません。

emは相対単位であり、Webページ上のテキストを拡大・縮小することができます。行の高さと垂直の高さの単位には em を使用します。スケーリング時の整合性を確保します。

どのブラウザでもデフォルトのフォントの高さは 16 ピクセルです。変更されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625emとなります。 font-size の変換を簡略化するには、CSS の body セレクターで Font-size=62.5% を宣言する必要があります。これにより、em 値は 16px*62.5%=10px となり、12px=1.2em、10px=1em となります。 , また、つまり、元の px 値を 10 で割って、単位を em に変更するだけです。

em には次の特性があります:

1. em の値は固定されません。

2. em は親要素のフォント サイズを継続します。

そのため、CSS を記述するときは次の点に注意する必要があります:

1. 本体セレクターで Font-size=62.5% を宣言します (Font-size=63%; ie6 互換性の場合)

2.元の px 値を 10 倍にして、単位として em に置き換えます

3. 拡大されたフォントの em 値を再計算します。フォント サイズの繰り返しの宣言は避けてください。

それは、1.2 * 1.2= 1.44 の現象を避けるためです。たとえば、#content でフォント サイズを 1.2em と宣言した場合、p のフォント サイズを宣言するときは、1.2em ではなく 1em のみにすることができます。これは、この em はその em ではなく、次の理由によるものです。 #contentのフォントの高さが1em=12pxになりました。

ただし、例外は 12px の漢字です。つまり、上記の方法で取得した 12px (1.2em) の中国語文字は、IE で 12px によって直接定義されたフォント サイズと等しくなく、わずかに大きくなります。この問題は Jorux によって解決されました。ボディセレクターの 62.5% を 63% に変更するだけで正常に表示されます。その理由は、IE が漢字を処理する場合、浮動小数点値の精度が制限されていることが考えられます。他に説明があるかどうかはわかりません。

単位ptの説明

印刷や写植において、ポイントは絶対値であり、定規で測定できる物理的なインチである1/72インチに相当します。ただし、CSS における pt の意味は同じではありません。ディスプレイはピクセルに分割されており、1 つのピクセルは 1 つの色しか持つことができないためです (簡単にするために、ここではサブピクセル アンチエイリアシング テクノロジについては説明しません)。サブピクセル アンチエイリアシング テクノロジを画面上に表示するには、まず長さを pt 単位に変換する必要があります。単位はピクセル単位の長さであり、この変換の媒体は DPI です (実際、ここでのいわゆる DPI は、オペレーティング システムとブラウザーで使用される用語です。つまり、PPI、1 インチあたりのピクセル、スキャナー、プリンターなどで使用されます)。デジタル カメラの DPI は異なる概念です)。

たとえば、どのオペレーティング システムであっても、Firefox ブラウザのデフォルトの DPI は 96 であり、実際には 9pt = 9 * 1/72 * 96 = 12px となります。

つまり、「DPI」の「I」と「1pt は 1/72 インチに等しい」の「インチ」は物理的なインチを表していませんが、2 つの単位は互いに等しい、つまり掛け算でほぼ失われます。

それでは、実際の物理的な長さを計算するにはどうすればよいでしょうか? 定規を取り出し、モニターの表示幅 (私の場合は 11.2992 インチ) を測定し、それを水平解像度 (私の場合は 1024 ピクセル) で割ってください。 、その結果は各ピクセルの物理的な長さになります。

これで、Web ページ上で 9pt フォントが占めるスペースはどれくらいですか? という質問に答えることができます。答えは、9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 インチ = 0.3363 センチメートルです。

pt は絶対単位ですが、出力デバイス専用です。テキスト植字ツール (word、abobe) では非常に便利なフォント単位です。モニターの解像度が何であっても、紙に印刷された結果は同じです。

しかし、ウェブページは主に画面表示を目的としており、印刷やその他のニーズを目的としたものではありません。また、px は画面上の要素の位置とサイズを正確に表すことができます。

もちろんです。 dpiが96の場合、9pt=12pxとなります。

px、em、%、ptの換算表を添付します

px、em、%、ptの換算

以上がpx、em、pt 単位間の変換とその違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

韓国のビットコインと国内のビットコインに違いはありますか? 韓国のビットコインと国内のビットコインに違いはありますか? Mar 05, 2025 pm 06:51 PM

ビットコインの投資ブームは、世界初の分散型デジタル資産であるため、増加し続けています。中国はかつてビットコインの最大の市場でしたが、政策の影響は取引制限につながりました。今日、韓国は世界の主要なビットコイン市場の1つになっており、投資家はITとその国内ビットコインの違いに疑問を投げかけています。この記事では、両国のビットコイン市場間の違いに関する詳細な分析を行います。韓国と中国のビットコイン市場の違いの分析。たとえば、2024年10月下旬、韓国のビットコインの価格はかつてでした

Nexo Exchangeは安全ですか? Nexo Exchangeは安全ですか? Mar 05, 2025 pm 07:39 PM

Nexo:それは暗号通貨交換であるだけでなく、デジタルファイナンシャルマネージャーでもあります。これにより、ユーザーは担保として暗号通貨でローンを取得することができ、関心を得るためのサービスを提供します。 Nexoは暗号通貨の購入、販売、償還機能も提供していますが、その中心的なビジネスは暗号融資です。この記事では、投資家により包括的な理解を提供するために、Nexoの運用モデルとセキュリティを詳細に調査します。 Nexoのオペレーティングモデルは2018年に設立され、スイスのZugに本社を置き、デジタルファイナンスの分野の先駆者です。これは、他の集中交換とは異なり、包括的な金融サービスの提供に重点を置いています。ユーザーは、資産を販売せずに暗号通貨を売買、取引することができます

エーテルとビットコインの違いは、エーテルとビットコインの違いは何ですか エーテルとビットコインの違いは、エーテルとビットコインの違いは何ですか Mar 19, 2025 pm 04:54 PM

イーサリアムとビットコインの違いは重要です。技術的には、BitcoinはPowを使用し、EtherはPowからPOSに移行しました。ビットコインの取引速度は遅く、イーサリアムは高速です。アプリケーションシナリオでは、Bitcoinは支払いストレージに焦点を当て、EtherはスマートコントラクトとDAPPをサポートしています。発行に関しては、ビットコインの総量は2100万人であり、エーテルコインの総額は固定されていません。各セキュリティチャレンジが利用可能です。市場価値に関しては、ビットコインが最初にランク付けされ、両方の価格の変動は大きいですが、特性が異なるため、イーサリアムの価格動向はユニークです。

ビットコインの憶測は株式投機ですか?なぜ? 2つの違いは何ですか? ビットコインの憶測は株式投機ですか?なぜ? 2つの違いは何ですか? Mar 05, 2025 pm 02:24 PM

ビットコイン:デジタルゴールドまたはストック取引デリバティブ?新たな投資方法としてのビットコインの性質の詳細な分析。この記事では、定義、自然、発行メカニズムなどの側面から詳細について説明し、ビットコイン投資の謎を明らかにします。ビットコインと株式:ビットコインと株式の本質的な違いは、ビットコインへの投資は株式への投資と同じではありません。ビットコインは、デジタル資産または仮想資産のカテゴリに属する​​分散型デジタル通貨です。この概念は、2009年に中本atによって提案されました。従来の通貨とは異なり、

Bean BreadとDeepseekの違いは何ですか Bean BreadとDeepseekの違いは何ですか Mar 12, 2025 pm 01:24 PM

Bean BunとDeepseekのコアの違いは、検索の精度と複雑さです。 1. Doubaoは、シンプルで直接的なキーワードのマッチングに基づいていますが、低コストですが、精度が低く、構造化されたデータにのみ適しています。深い学習に基づいています。最終的な選択は、アプリケーションのシナリオとリソースの制限に依存します。

暗号投資のメンタリティは非常に重要です!不必要な心配を避け、正しい決定を下す方法は? 暗号投資のメンタリティは非常に重要です!不必要な心配を避け、正しい決定を下す方法は? Mar 05, 2025 pm 07:24 PM

暗号投資の恐怖、不確実性、疑い:情報に基づいた意思決定を行う方法は?多くの暗号投資家は、「これは最後のサイクル」に対する恐怖と、強気市場の期間に関する懸念に直面しており、他の人からの圧力と相まって、それが一緒になって投資の決定につながります。この記事では、これらの課題を克服し、より賢い投資の選択をする方法を模索します。潜在的なリスク:気晴らし:盲目的にホットスポットを追いかけ、コア資産の価値を無視します。悲観主義とためらい:不確実性は、自信の欠如、長い間保持できないこと、さらには市場から退場することにつながります。信念の欠如:プロジェクトに関する詳細な研究の欠如であり、市場のボラティリティに対処できません。利益作成戦略の欠如:プルバックの恐怖、潜在的なリターンの欠落のために、ポジションを早期にクリアする。対処戦略:1。コア領域に焦点を当てる:

マルチスレッドと非同期C#の違い マルチスレッドと非同期C#の違い Apr 03, 2025 pm 02:57 PM

マルチスレッドと非同期の違いは、マルチスレッドが複数のスレッドを同時に実行し、現在のスレッドをブロックせずに非同期に操作を実行することです。マルチスレッドは計算集約型タスクに使用されますが、非同期はユーザーインタラクションに使用されます。マルチスレッドの利点は、コンピューティングのパフォーマンスを改善することですが、非同期の利点はUIスレッドをブロックしないことです。マルチスレッドまたは非同期を選択することは、タスクの性質に依存します。計算集約型タスクマルチスレッド、外部リソースと相互作用し、UIの応答性を非同期に使用する必要があるタスクを使用します。

長い借用コインと短い借用コインの違いは何ですか?同じですか? 長い借用コインと短い借用コインの違いは何ですか?同じですか? Mar 05, 2025 am 11:51 AM

暗号通貨取引戦略:長い借用コインと短い販売の違いの詳細な説明は、それぞれ暗号通貨取引における2つの一般的な戦略です。しかし、2つの間に目的、操作、リスクに大きな違いがあります。この記事では、長い借用コインと短い借用コインの違いについて詳しく説明し、投資家がこれらの2つの戦略をよりよく理解できるようにします。長い借用コインと短い借用コインの違い:重要な違​​いは、取引目標、操作手順、リスク許容度にあります。取引目標:長い借用コイン:投資家は、資産価格が上昇することを期待し、資金(通常は安定)を借りてより多くの資産を購入し、価格が上昇した後に利益を上げるために販売することを期待しています。販売および借入コイン:投資家は資産価格が下落することを期待し、すぐに借りた資産を販売し、価格が下がった後も同じ数を買い戻します。

See all articles