优化手机背景gif？答案

【问题标题】：Optimizing background gif for mobile phones?优化手机背景gif？
【发布时间】：2014-03-02 22:29:52
【问题描述】：

所以，我有一个 gif 正在运行，它占据了整个屏幕，作为背景。但是，当我在手机上查看该网站时，整个屏幕并没有被填满，并且在一半的时候只是黑色的。 http://goroam.org 这是链接，我如何在手机上显示 gif 占据整个屏幕并且文本在中间，就像我在笔记本电脑上查看网站一样？

【问题讨论】：

标签： html css mobile optimization gif

【解决方案1】：

这是您的解决方案..

制作背景尺寸：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 媒体查询..

这是小提琴http://jsfiddle.net/krunalp1993/53zaT/

使用媒体查询

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

这里是使用媒体查询的小提琴http://jsfiddle.net/krunalp1993/53zaT/2/

希望这对你有帮助:)

【讨论】：