rem布局快速写法-526互联

vw的兼容性已经没问题，现在推荐优先使用vw

但是rem布局还是有其用武之地，比如需要动态改变字体大小的场景(有小，中，大三种字体，可手动选择，方便不同人群查看)

vw 和 rem 的兼容性

| 兼容性 | ios | 安卓 |

| rem | 4.1+ | 2.1+ |

| vw | 6.1+ | 4.4+ |

js快速写法(与设计稿不挂钩)

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';

css快速写法1(与设计稿不挂钩)

html {fons-size: 1vw}

css快速写法2(与设计稿挂钩)

/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 750);
}

css快速写法3(与设计稿挂钩)

/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}

原理：

实际px = (手机屏幕宽度 / 设计稿宽度) * 设计稿px

如果把 font-size = (手机屏幕宽度 / 设计稿宽度)，即 1rem = (手机屏幕宽度 / 设计稿宽度)，这个时候写 200px(设计稿宽度)，可直接写成 200rem

由于手机屏幕宽度 / 设计稿宽度通常结果为小数，例如 100vw / 750 = 0.133333333 vw

为了书写方便通常会放大100倍令 1rem = (手机屏幕宽度 / 设计稿宽度) * 100，这样写 200px, 要写成 2rem

本人觉得，还不如不放大100倍，直接就用 1rem = (手机屏幕宽度 / 设计稿宽度)，font-size写成小数，总比所有的px都除以100要方便吧

js完整写法

var documentElement = document.documentElement;

function setRem() {
    var clientWidth = documentElement.clientWidth;
    // 屏幕宽度大于780，认为是PC端，不放大
    clientWidth = clientWidth < 780 ? clientWidth : 780;
    // 系数为100，当屏幕很小，例如320，html大小是3.2px，小于浏览器最小字体12px，可将ratio改为10
    // 本人认为没必要，小于浏览器最小字体，会显示为最小字体，无妨
    // ratio 改为 750，可与设计稿挂钩
    var ratio = 100;
    documentElement.style.fontSize = clientWidth / ratio + 'px';
}

document.addEventListener('DOMContentLoaded', setRem);
window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', setRem);

px2rem-loader loader vue3 2rem