Html 优化手机背景gif？

所以，我有一个gif运行，它占据了整个屏幕，作为背景。然而，当我在手机上查看网站时，整个屏幕并没有被填满，而一半的屏幕是黑色的。这里的链接，我将如何做到这一点，电话将有它的GIF占据整个屏幕，文本是在中间，就像我是从一个笔记本电脑看这个网站？

< P>这是你的解决方案…< /P> 制作背景尺寸：100%100%；将使图像完全显示在屏幕上

并使h1响应屏幕，使其自动调整屏幕

以下是代码：

html {
    height: 100%;
}

body {
    color: #EEEEEE;
    font: 24px/1.3 "arial";
    min-height: 100%;
    background: url("http://media.giphy.com/media/13bGgH9VnEDsuA/giphy.gif") no-repeat scroll 0 0 / 100% 100% #000000;
    height: auto;
    margin: 0;
    width: 100%;
}

h1 {
    color: #F0F0F0;
    font-family: "belta bold";
    font-size: 212px;
    left: 0;
    margin: -120px 0 0;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}

如果您想要完美的解决方案，请使用css媒体查询

这是小提琴

使用媒体查询

@media screen and (max-width:1024px){
   h1{
   font-size:62px;
   margin-top:-31px;
}
}

这里是fiddle使用媒体查询

希望这能让你：