レム適応レイアウト--- 1つの基礎

1.中

REMを導入する前に、最初のem単位を導入しました。EMは、親要素のフォントサイズに相対的である親要素、親要素を持っているし、フォントサイズを持っている時間の使用です。

<body>
    <div>
        <p></p>
    </div>
</body>
<style>
    div {
        font-size: 12px;
    }
    /* 1. em是相对于父元素的字体大小来说的 */
    
    p {
        /* 10em就是10*12=120px */
        width: 10em;
        height: 10em;
        background-color: pink;
    }
</style>

2. REM(ルートで)

違いは、EMと、REM親要素のフォントサイズに対する、しかしそのルートEMと呼ばれるhtml要素のフォントサイズに対する相対的ではないということです。

<body>
    <div>
        <p></p>
    </div>
</body>
<style>
    html {
        font-size: 14px;
    }
    
    div {
        font-size: 12px;
    }
    /* 2. rem是相对于html元素的字体大小来说的 */
    
    p {
        /* 10rem就是10*14=140px */
        width: 10rem;
        height: 10rem;
        background-color: pink;
        /* 这就生成了140px*140px的粉色盒子了 */
    }
</style>

REM利点は、全体のサイズがHTML内のテキストのページサイズの要素を変更することによって制御することが可能に変更することができるということです。

おすすめ

転載: www.cnblogs.com/deer-cen/p/12128426.html