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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 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实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
php实现的简单检验登陆类
2015/06/18 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
php微信开发之上传临时素材
2016/06/24 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
JS 表单验证大全
2011/11/23 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
Python的SQLAlchemy框架使用入门
2015/04/29 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
python入门之井字棋小游戏
2020/03/05 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
爷爷追悼会答谢词
2014/01/24 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
2014年医生工作总结
2014/11/21 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
JavaScript流程控制(循环)
2021/12/06 Javascript
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL