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实现顶部社会化分享按钮示例
May 06 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 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/03/25 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
深入理解javascript作用域和闭包
2014/09/23 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
森林防火工作方案
2014/02/14 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
班主任新年寄语
2014/04/04 职场文书
捐书活动总结
2014/05/04 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang