html中页面按百分比显示,HTML页面百分比自适应浏览器小结

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

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;

})();window.innerheight返回窗口的文档显示区的高度，IE 8及更早IE版本不支持，请看window.innerHeight、innerWidth浏览器兼容解决方法。

onresize事件，如果使用频繁，请考虑考虑加一下js节流函数。