1

デスクトップとモバイルの両方で Web サイトを最適化するために、メディア クエリを使用してスクリーン ブレークを作成しています。現在、現在の 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 に答える