在做手机版页面时，会遇到字体缩放的问题，首先想到的字体大小单位是rem，但是rem都是相对单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。（为什么不使用em，可以看下面的介绍）

rem和em的差异

        rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。

        em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。

rem和em的总结

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

em 单位基于使用他们的元素的字体大小。

rem 单位基于 html 元素的字体大小。

em 单位可能受任何继承的父元素字体大小影响

rem 单位可以从浏览器字体设置中继承字体大小。

使用 em 单位应根据组件的字体大小而不是根元素的字体大小。

在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。

使用rem单位，除非你确定你需要 em 单位，包括对字体大小。

媒体查询中使用 rem 单位

不要在多列布局中使用 em 或 rem ,改用%。

不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。

如果根据网页的宽度实时调整字体的大小

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = \'orientationchange\' in window ? \'orientationchange\' : \'resize\',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth >= 640) {
            docEl.style.fontSize = \'85px\';
        } else {
            docEl.style.fontSize = 85 * (clientWidth / 640) + \'px\';
        }
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(\'DOMContentLoaded\', recalc, false);
})(document, window);

上面的代码可通过获取网页的宽度自动调整网页字体大小px值，从而确定rem的相对值。

本文地址：https://www.stayed.cn/item/53

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我