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悬停效果案例应用
Nov 21 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php 变量定义方法
2009/06/14 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
JS数组方法concat()用法实例分析
2020/01/18 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
信息技术培训感言
2014/03/06 职场文书
一分钟演讲稿
2014/04/30 职场文书
旷工辞退通知书
2015/04/17 职场文书
中学政教处工作总结
2015/08/13 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server