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 相关文章推荐
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 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
神族 Protoss 历史背景
2020/03/14 星际争霸
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
php实现简单加入购物车功能
2017/03/07 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
理解javascript封装
2016/02/23 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
一些.net面试题
2014/10/06 面试题
物流专业毕业生推荐信范文
2013/11/18 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js
Docker官方工具docker-registry案例演示
2022/04/13 Servers