px 和 em 与 rem 的区别

最新推荐文章于 2024-03-16 14:03:27 发布

nuochen2615

最新推荐文章于 2024-03-16 14:03:27 发布

阅读量219

点赞数 2

本文链接：https://blog.csdn.net/qq_39862865/article/details/79206959

版权

rem (font size of the root element) 是指相对于根元素的字体大小的单位，简单的说它就是一个相对单位，rem的html.style.fontSize一般是16px

px 是像素(Pixel)的缩写，是图形的基本单位，相对于显示器屏幕分辨率而言的，设计稿的单位是px，一般是750px

em是相对长度单位，相对于当前对象内文本的字体尺寸

任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合: 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转换rem公式：

var html = document.documentElement;

html.style.fontSize = (html.clientWidth/750)*100+”px”;

或者

<script>
    // 设置rem
        let fontSize = 0;
        (function (doc, win) {
            //获取html节点和事件 和屏幕变化改变字体大小
            const docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    const clientWidth = docEl.clientWidth;
                    if (!clientWidth) return; //排除宽度没值
                    if (clientWidth >= 750) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };

            function fontSizeFun() {
                let size = 0;
                let clientWidth = docEl.clientWidth;
                if (!clientWidth) return; //排除宽度没值
                if (clientWidth >= 750) {
                    size = 100;
                } else {
                    size = 100 * (clientWidth / 750);
                }
                return size;
            }
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener("DOMContentLoaded", recalc, false);
            fontSize = fontSizeFun();
            win.addEventListener(resizeEvt, function () {
                fontSize = fontSizeFun();
            }, false);
            doc.addEventListener("DOMContentLoaded", function () {
                fontSize = fontSizeFun();
            }, false);
        })(document, window);
</script>