Question

我有一张分辨率为1900x1200的背景图片，背景在大多数分辨率上显示得很好但是当我进入移动分辨率时我遇到了问题。背景是拉出来的，非常难看。在我的手机中网站的版本有很多高度（在android s4上我的身高差不多是3000px），现在我的问题是如何让我的手机背景看起来更好？

这是我目前用于背景的css代码。我知道我必须在媒体查询中添加一些新代码，仅用于特定的手机分辨率，但我不知道...有什么帮助或解释？

body {
background: url(mypicture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

在定义屏幕大小限制的新媒体查询下使用相同的正文声明，并且最好拉一个新图像 - mypicture-mobile.jpg已经调整大小，同时记住移动显示。尝试

@media only screen and (max-width : 480px) { /*change 480 to targeted device width */
body {
    background: url(mypicture-mobile.jpg) no-repeat center center fixed;
    -webkit-background-size: 100% 100%; /* set to 100% instead of cover to fit screen */
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    }
}

一点点玩耍会揭示你的解决方案，试一试

希望这会有所帮助。

缩小手机背景

1 个答案: