JS屏幕适配器，rem,em,px使用，_js rem px-优快云博客

本文详细解析了EM和REM这两种相对长度单位在CSS中的应用，以及它们如何相对于当前元素和根元素的字号进行计算。同时介绍了如何利用JS进行屏幕适配，确保在不同分辨率下网页布局的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于EM和REM

em相对长度单位，其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小例如.box {font-size：16px;}则1em = 16px .box {font-size：32px; }则1em = 32px，0.5em = 16px

rem相对长度单位，其参照根元素（html）字号大小例如html {font-size：16px;}则1rem = 16px html {font-size：32px;}则1rem = 32px，0.5rem = 16px

px就是像素的缩写，像素即像素，它不是自然界的长度单位.PX是就是一张图片中最小的点，一张位图就是由这些点构成

JS适配器

使用说明

支持所有屏幕以及转屏
分辨率以750px为设计稿宽度，750基础的情况下1rem = 100px
取值HTML的字体大小为100是为了方便计算
如果设计稿是640像素那么就把750改成640
把设计稿测量到的数值直接除以100，把单位写成REM就可以了
例如设计稿测量到宽度为30像素那么就好计算百分之三十零= 0.3，口算就能得出0.3rem

// 屏幕适配js 自运行函数
(function (doc, win) {
    // html
    var html = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = html.clientWidth;
            if (!clientWidth) return;
            html.style.fontSize = 100 * (clientWidth / 750) + 'px';
           
        };
        
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);