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节流函数。

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

Github页面图片无法显示Github页面访问不了
在github上查阅资料,但是页面的图片不显示解决方法,打开路径C:\Windows\System32\drivers\etc下的hosts文件在最后加上 GitHub Start 192.30. ...
用js把数据从一个页面传到另一个页面
打开支付宝首页搜索: 4046160(可保存下来,每天可领一次) 领取方式,一定要点击立即领取按钮这个才是金额比较大的余额宝红包. 红包平均为 3-5块 ,每天可领一次,有效期三天,必须上一次领 ...
问题解决10使用带有框架的页面跳转到登录页面时，登录页面只显示在子框架中，未能铺满整个浏览器--解决方案如下：...
问题描述: 使用带有框架的页面跳转到登录页面时,登录页面只显示在子框架中,未能铺满整个浏览器,例如: 当登录信息过期时,点击左边的菜单栏会让登录页面显示在右边的框架中,而不能铺满整个浏览器解决方案: ...
分享Laravel中blade页面更改没有及时显示在页面的问题解决方案
分享Laravel中blade页面更改没有及时显示在页面的问题解决方案参考文章: (1)分享Laravel中blade页面更改没有及时显示在页面的问题解决方案 (2)https://www.cnbl ...
axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...
sharepoint页面嵌入_在其他系统Iframe中显示SharePoint 页面
前段时间在做一个项目,要求将SharePoint 的 OWA(Office Web Apps)中的文档显示页面嵌入到另外一个OA系统中,提供给用户可以通过浏览器查看SharePoint文档的能力. 嵌 ...
笔记-返回到前一个页面时显示前一个页面中ajax获取的数据
笔记第一部分:http://www.cnblogs.com/zczhangcui/p/6869219.html 在第一部分遇到的问题是,用ajax获取了一系列列表信息后,拼接好html后插入到了原有页 ...
layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
【Flutter 问题系列第 22 篇】在 Flutter 中如何截取屏幕并显示到页面中，以及如何将截图保存到相册
这是[Flutter 问题系列第 22 篇],如果觉得有用的话,欢迎关注专栏. 关于在 Flutter 中如何截取屏幕,以及如何将截图保存到相册的文章少之又少,即使有,也是错误一大片,有的甚至运行后都 ...

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

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

最新文章

热门文章