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 相关文章推荐
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
JavaScript中Math对象使用说明
2008/01/16 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python3实现随机数
2018/06/25 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
python实现视频读取和转化图片
2019/12/10 Python
Python Lambda函数使用总结详解
2019/12/11 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
.NET常见笔试题集
2012/12/01 面试题
九年级数学教学反思
2014/02/02 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
医院志愿者活动总结
2015/05/06 职场文书
道歉信范文
2015/05/12 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书