Question

所以，我有一个gif运行，它占据整个屏幕，作为背景。然而，当我在手机上查看网站时，整个屏幕都没有填满，而一半只是黑色。 http://goroam.org这里是链接，如何将手机放在gif占据整个屏幕的位置，文本位于中间，就像我从笔记本电脑上查看网站一样？

Answer 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/

的小提琴

希望这可以解释你：）

优化手机的背景gif？

1 个答案: