如何为iPhone找出合适大小的背景图像

Question

我正在使用媒体查询来创建屏幕分隔符，以便有一个在桌面和移动都优化的网站。目前，当我使用当前的css打开站点时，背景图片被放大到不成比例。(当前背景尺寸为: 640px x 960px。)

下面是当前的css：

@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-    pixel-ratio : 2) {

    #home{width: 980px;
        height: 1090px;
        background-image: url(../images/landingPageRetina.jpg) 50% 0 no-repeat;
        background-size: 100% 100%;}

    #about{background-image: url(../images/aboutMobile.png) 50% 0 no-repeat;}


    #music{background-image: url(../images/musicMobile.jpg)  50% 0 no-repeat;}

    #videos{background-size: url(..images/videosMobile.jpg)50% 0 no-repeat;}

    #connect{background-image: url(..images/connectMobile.jpg)50% 0 no-repeat ;}

    #contact{background-image: url(../images/contactMobile.jpg)50% 0 no-repeat ;}
}

有没有人对正确的大小有什么建议--这样图像才能按比例渲染？

Answer 1

iPhone5为640x1136。有关更多详细信息，请参阅smashing杂志的这篇文章：http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

最好的背景是不需要太多媒体查询就能让它看起来很好的背景。尝试CSS3渐变或平铺背景...