前端

H5开发问题

H5开发要换算比例,用了下面这段代码就可以简单的换算试用rem单位了

window.onload = function(){
    getRem(750,100);
};
window.onresize = function(){
    getRem(750,100);
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    console.log(oWidth);
    html.style.fontSize = oWidth/pwidth*prem + "px";
}

还有一个问题,页面内容先加载了,才会换算单位。这里会出现先显示样式错乱的样子,页面载入完才会恢复样式。这种情况可以想做一个载入的图层效果,载入完换算了单位再把图层去掉,这样就不会出现那种情况,体验会好一点。

元素代码

<div class="loadding" id="loadding">加载中...</div>

css代码

.loadding {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 16px;
}

配合rem换算是这样的

window.onload = function(){
    getRem(750,100);
    $('#loadding').fadeOut(500);
};
window.onresize = function(){
    getRem(750,100);
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    console.log(oWidth);
    html.style.fontSize = oWidth/pwidth*prem + "px";
}

其实换算单位还有另一种写法,他不是页面加载完在执行,有时候会更灵活

!function(n){
    var  e=n.document,
    t=e.documentElement,
    i=750,
    d=i/100,
    o="orientationchange"in n?"orientationchange":"resize",
    a=function(){
        var n=t.clientWidth||320;n>750&&(n=750);
        t.style.fontSize=n/d+"px"
    };
    e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

类似文章