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。通过粉碎杂志来查看本文，了解更多详情：http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

使用的最佳背景是不需要这么多媒体查询才能使其看起来很好。试试CSS3渐变或平铺背景......

如何为iPhone找出合适尺寸的背景图片

1 个答案: