关于em rem px

发表于 更新于 分类于 本文字数： 1k 阅读时长 ≈ 1 分钟

js操作rem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>html{font-size:100px;}</style>
<script> 
    //屏幕适应 
    (function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
            var html = document.documentElement;
            var k = 750;
            var clientW = html.clientWidth > 750 ? 750 : html.clientWidth;
            html.style.fontSize = clientW / k * 40 + "px";
        }
        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);
</script>

px em rem

1.em

一般都是 body 的 font-size 为基准，例如：

1
2
3
4
5
6
7
8
body {
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
}
h1 {
    font-size: 2.4em;
    /*2.4em × 10 = 24px */
}

计算公式：1 ÷ 父元素的font-size × 需要转换的像素值 = em值

2.rem

1
2
3
4
5
6
7
8
9
10
11
12
html {
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
}
body {
    font-size: 1.4rem;
    /*1.4 × 10px = 14px */
}
h1 {
    font-size: 2.4rem;
    /*2.4 × 10px = 24px*/
}