html中页面按百分比显示,HTML页面百分比自适应浏览器小结
页面元素尺寸按百分比计算，其中图片元素要考虑到兼容IE6+，不可以使用背景IE9+的background-size。
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节流函数。