1

我正在使用媒体查询来创建屏幕中断，以便在桌面和移动设备上优化网站。目前，当我使用当前的 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 ;}
}

有没有人对正确的尺寸有任何建议 - 以便图像按比例呈现？

4

1 回答 1

0

iPhone5 是 640x1136。更多详情请看粉碎杂志这篇文章：http: //mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

最好使用的背景是不需要太多媒体查询就可以使它看起来不错的背景。尝试 CSS3 渐变或平铺背景...

于 2013-09-01T00:04:46.770 回答