CSSの長さ単位emの紹介-CSSチュートリアル-php.cn

この記事では CSS の長さの単位 em について説明します。必要な方は参考にしていただければ幸いです。

1. emを使用する理由

emもpxと同様にCSSの単位です。多くの人は、なぜ px が存在するのに em がまだ使用されているのか疑問に思うでしょう。em は px よりも使用するのが面倒です。

em は主に柔軟なレイアウトで使用されます。これは em の威力を説明するための小さな栗です

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .top {
            height: 80px;
            background-color: black;
        }
        
        .main {
            width: 960px;
            background-color: #ccc;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .left {
            width: 30%;
            height: 100%;
            background-color: aqua;
            border: 1px solid red;
            float: left;
            font-size: 16px;
            line-height: 18px;
        }
        
        .right {
            width: 60%;
            height: 100%;
            font-size: 1em;
            line-height: 1.125em;
            background-color: deeppink;
            border: 1px solid red;
            float: right;
        }
    </style></head><body>
    <p class="top"></p>
    <p class="main">
        <p class="left">
            <ul>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
                <li>em测试用例，没有em的情况</li>
            </ul>
        </p>
        <p class="right">
            <ul>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
                <li>em测试用例有em的强大之处</li>
            </ul>
        </p>
    </p></body></html>

ログイン後にコピー

Web ページの大まかなレイアウトと、em と px の使用の違いが示されています。

通常の状況では、em と px は何ら変わりません。以下のように

次に、Ctrlキーを押しながら「-」（マイナス記号）キーを押し続けると、ページが連続的に縮小されます。サイズを 25% に縮小すると、明らかな違いが現れます (ここでは Chrome ブラウザを使用しています。他のブラウザでこのような状況が発生しない場合は、ブラウザのフォントサイズを手動で変更できます。同様の状況が発生します) 下の図

のように、pxを使用した左側が完全に崩れて、特定のテキストが見えなくなっていることがわかります。 em を使用した右側のテキストは、依然としてはっきりと見ることができます。この現象の主な理由は、em は相対的なサイズであり、em を使用してもページの拡大または縮小に大きな影響を与えないことです。

相対的なサイズであるため、基準サイズが存在します。emの基準サイズは現在の要素のフォントサイズです。 これにより、現在の要素のフォントサイズが基準として使用されるため、現在のフォントが em 単位である場合、何が基準として使用されるのでしょうか?このとき、親要素のフォントサイズが基準となります。

したがって、ページ全体で em をフォントサイズとして使用する場合、ページ内の 1em はブラウザのデフォルトのフォントサイズ 16 ピクセルになります

2. em の具体的な使用方法:

1. -size: 1em}

本文のフォントサイズを設定した後、本文のフォントはブラウザーのデフォルトの 16px を継承するため、すべての Web ページで em が使用されている限り、1em=16px になります。要素の具体的な必要サイズの計算を開始します

(1) 要素のフォントサイズが上位層から継承される16pxの場合、要素内では1em=16pxとなるため、計算方法は次のようになります。

必須のem値 = 現在の要素のpx値/親要素のフォントサイズ値px (通常は16px)

例: 1px=1/16=0.0625em、18px=18/16= 1.125em

(2)要素のフォントサイズを自分で設定した場合

現在の要素のフォントサイズのem値=現在の要素のフォントサイズpx/親要素のフォントサイズpx

現在の要素で必要なその他のem値=現在の要素/要素のPx値独自のフォントサイズpx

以下、例を通して詳しく説明します

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 1em;
        }
        
        .son1 {
            font-size: 2em;
            height: 5em;
            width: 5em;
            border: 0.0625em solid red;
            background-color: aqua;
            margin: 0 auto;
        }
        
        .son2 {
            font-size: 32px;
            height: 160px;
            width: 160px;
            border: 2px solid red;
            background-color: aqua;
            margin: 100px auto;
        }
    </style></head><body>
    <p class="fa">
        <p class="son1">aaa son1</p>
        <p class="son2">aaa son2</p>
    </p>
  </body>
</html>

ログイン後にコピー

.son1のボックスモデルを開きますブラウザにボックスが表示され、Web ページの結果の画像は以下に詳しく説明されています

.son1 は .son2 とまったく同じです。

.son1 のフォントサイズは 2em で、対応する px は 2*16=32px です (つまり、現在の要素のフォントサイズ (

) = フォントサイズの式

em 値を確認できます。現在の要素の px (32)/親要素のフォントサイズ px (16)) 高さと幅は 5em、対応する px は 5*32=160px です (式は検証できます。

現在の要素に必要なその他のem値

(5)=現在の要素のpx値(160)/のサイズ要素自体 px(32) ) 注: ie5/6 では、柔軟なレイアウトを確保するために html { font-size: 100%} を追加する必要があります (ただし、現在 ie5/6 は基本的に追加します)これは記事《

The Incredible Em & Elastic Layouts with CSS

》に基づいています。調べてみたところ、具体的な問題が何なのかはわかりませんでした。今後の参考のために書き留めておきます。 .)

3、rem的使用

rem使用方法和em类似，不过rem是相对于根元素的大小（即html的字体大小），而不是自身的大小。2中的栗子中的.son1 的相关带em的属性全改为rem 代码如下

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .son1 {
            font-size: 2rem;
            height: 5rem;
            width: 5rem;
            border: 0.0625rem solid red;
            background-color: aqua;
            margin: 0 auto;
        }
        
        .son2 {
            font-size: 32px;
            height: 160px;
            width: 160px;
            border: 2px solid red;
            background-color: aqua;
            margin: 100px auto;
        }
    </style></head><body>
    <p class="fa">
        <p class="son1">aaa son1</p>
        <p class="son2">aaa son2</p>
    </p></body></html>

ログイン後にコピー

结果图为：