Código js de uso común para un diseño flexible en unidades rem

1. Bloque de código js básico

function fontSize() {
    var view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
    var _html = document.getElementsByTagName('html')[0];
    view_width > 768 ? _html.style.fontSize = 100 * 768 / 375 + 'px' : _html.style.fontSize = view_width * 100 / 375 + 'px';
}
fontSize();
window.onresize = function() {
    fontSize();
}

2. La página debe agregarse cuando la pantalla está llena.

var htmlHeigt=window.innerHeight;
var rebate_home=document.getElementsByClassName('rebate_home')[0].clientHeight;
this.offset={
        height:(htmlHeigt-rebate_home)+'px',
        background:'#eff0f4'
}
this.offset=htmlHeigt>rebate_home?{
        height:htmlHeigt+'px'
        }:{
            height:rebate_home+'px'
        }

3. La página del teléfono móvil es adaptable y se introduce el siguiente código js nativo en la página.

(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 = '100px';
               }else{
                   docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
               }
           };
 
       if (!doc.addEventListener) return;
       win.addEventListener(resizeEvt, recalc, false);
       doc.addEventListener('DOMContentLoaded', recalc, false);
   })(document, window);

Si el ancho de la página excede los 640 px, entonces el tamaño de fuente html es siempre 100 px; de lo contrario, el tamaño de fuente html es 100 * (el ancho de la página actual / 640)

¿Por qué es 640px?

El dibujo de diseño es generalmente de 640 px, lo que equivale a 100 px = 1rem, lo cual es conveniente para el cálculo; el tamaño de la página está por debajo del límite de 640 px, por lo que el cuadro más externo debe ser:

position: relative;

width: 100%;

max-width: 640px;

min-width: 320px;

margin: 0 auto;

Resumen de: https://www.cnblogs.com/beiz/p/5666477.html