加入收藏 | 设为首页 | 会员中心 | 我要投稿 河北网 (https://www.hebeiwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

HTML5 body配置自顺应全屏

发布时间:2020-05-10 20:02:50 所属栏目:编程 来源:站长网
导读:用什么代码实现?不应承有白色底色发生,由于手机高度纷歧样 计划图要尺度(750)确认是配景图(通屏底图)应用场景:移动端宣传页面可能勾当页面 错误的写法:加到div中团结图片配置min-height,可是页面不会回弹 终极方案 html,body{ width:100%; height

用什么代码实现?不应承有白色底色发生,由于手机高度纷歧样

计划图要尺度(750)确认是配景图(通屏底图)应用场景:移动端宣传页面可能勾当页面

错误的写法:加到div中团结图片配置min-height,可是页面不会回弹

终极方案

html,body{ width:100%; height:100% }

body{ font-family: "汉文细黑"; background:url("../img/Flyer-bg.png") no-repeat; background-size: 100%; }

一个hack方案办理垂直剧中题目

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,minimum-scale=1.0"> <title>缓存</title> <script src=http://www.jb51.net/html5/"js/jquery-1.8.2.min.js"></script> <script src=http://www.jb51.net/html5/"js/store.min.js"></script> <style> .parent{ width:200px; height: 200px; /* 以部属性垂直居中 */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #aaa; } </style> </head> <body> <div class="parent">111</div> </body>

其他方案

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%"> <img src=http://www.jb51.net/html5/"https:/www.qianbuxian.com/uploads/banners/20171214085954_shouye5.jpg" width="100%" height="100%"/> </body> </html>

破除浮动

.float-left { float: left; } .float-right { float: right; } .clear-fix:after { display: table; content: ''; clear: both; }

到此这篇关于HTML5 body配置自顺应全屏的文章就先容到这了,更多相干HTML5自顺应全屏内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章,但愿各人往后多多支持剧本之家! 

(编辑:河北网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读