• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5 body设置自适应全屏

    用什么代码实现?不允许有白色底色产生,因为手机高度不一样

    设计图要标准(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="js/jquery-1.8.2.min.js"></script>
        <script src="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="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自适应全屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家! 

    上一篇:iframe与window.onload如何使用详解
    下一篇:Html5页面上如何禁止手机虚拟键盘弹出
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5 body设置自适应全屏 HTML5,body,设置,自,适应,全屏,