HTML5 body设置自适应全屏


Posted in HTML / CSS onMay 07, 2020

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

设计图要标准(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自适应全屏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木! 

HTML / CSS 相关文章推荐
CSS3 3D制作实战案例分析
Sep 18 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
iframe与window.onload如何使用详解
May 07 #HTML / CSS
HTML5录音实践总结(Preact)
May 07 #HTML / CSS
详解HTML5.2版本带来的修改
May 06 #HTML / CSS
canvas绘制太极图的实现示例
Apr 29 #HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 #HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 #HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 #HTML / CSS
You might like
php 文件状态缓存带来的问题
2008/12/14 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
css配合jquery美化 select
2013/11/29 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
jQuery each和js forEach用法比较
2019/02/27 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python实现在目录中查找指定文件的方法
2014/11/11 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
python切割图片的示例
2020/11/12 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
农救科工作职责
2013/11/27 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
优秀部门获奖感言
2014/02/14 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
团日活动总结书
2014/05/08 职场文书
企业介绍信范文
2015/01/30 职场文书
工资证明格式模板
2015/06/12 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js