HTML页面百分比自适应浏览器小结

2019-06-04213次阅读HTML

页面元素尺寸按百分比计算,其中图片元素要考虑到兼容IE6+,不可以使用背景IE9+的background-size。

<div class="swfbox" id="wrap">
    <img class="bg" src="images/bg.jpg" alt="背景图片要兼容IE6+不能当作背景使用background-size">
    <img class="title" src="images/icon.png" alt="3秒极速下载">
</div>
html,body,.swfbox{
    height:100%;
    overflow:hidden;
}

.swfbox{
    position:relative;
    margin:0 auto;
}

.bg{
    width:100%;
    height:100%;
}

.title{
    position:absolute;
    left:50%;
    top:82.083%;
    $width:15.625%;
    width:$width;
    margin-left:(-$width/2);
    height:8.541%;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scale3d(1.05,1.05,1.05)
    }

    to {
        transform: scaleX(1)
    }
}

元素尺寸计算参考:百分比实现图片、视频、元素宽高等比缩放

(function() {
    const doc = document;
    const win = window;
    const wrap = doc.getElementById('wrap');

    const getW = function(h){
            //得到宽,设计图尺寸。
            return Math.round(2220/990 * h);
        };

    const fu = function(){

        var html = doc.documentElement,
            windowWidth = html.clientWidth,
            w = getW(html.clientHeight),
            str = 'auto';

        if(w > windowWidth){
            str = '-'+(w-windowWidth)/2 +'px';
        }

        wrap.style.marginLeft = str;

        wrap.style.width = w + 'px';
    };

    fu();

    win.onresize = fu;
})();
上一篇: CSS3 滤镜(Filter)使用小结  下一篇: display:none及textarea实现按需加载、延迟加载、懒惰渲染  

HTML页面百分比自适应浏览器小结相关文章