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

rem单位下的弹性布局常用js代码

猜你喜欢