remユニットの下で柔軟なレイアウトを行うために一般的に使用されるjsコード

1.基本的なjsコードブロック

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.画面がいっぱいになったときにページを追加する必要がある

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.携帯電話ページはアダプティブであり、次のネイティブjsコードがページに導入されています

(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);

ページ幅が640pxを超える場合、html font-sizeは常に100pxです。それ以外の場合、html font-sizeは100 *（現在のページ幅/ 640）です。

なぜ640pxなのですか？

設計図は通常640pxであり、これは100px = 1remに相当し、計算に便利です。ページのサイズは640pxの制限を下回るので、最も外側のボックスは次のようになります。

position: relative;

width: 100%;

max-width: 640px;

min-width: 320px;

margin: 0 auto;

概要：https : //www.cnblogs.com/beiz/p/5666477.html