0

私はウェブサイトを作っていて、それを Mac と iPad で動かしています。iPhone で見ると、ページの 1 つで背景画像が正しく配置されていません。ウェブサイトで 2 つの背景画像を使用しており、既に高さを約 1200px に設定しています。同じページを iPhone で見ると、テキストがすべて折り返されてページが長くなります。フッター画像が同じ位置に留まり、テキストが重なって表示されます。すべてのテキストが で囲まれているので、iPad として動作するはずではありませんか? 問題は、画像が本文に設定されていることであり、それは ではないため、テキストの長さの増加には従わないことに気付きました。その背景画像の高さを Mac + iPad 専用に指定し、別の高さを iPhone 用に指定するにはどうすればよいですか?

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#333;
    background:#000;
    margin: 0px auto;
    background-image:url(images/gradcinza_top.png), url(images/gradcinza_bot.png);
    background-repeat:repeat-x, repeat-x;


    background-position:0px 115px, 0px 950px;

    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    vertical-align: baseline;
    }

iPad と Mac では、これらの 950px がフッター画像を私が望む正確な場所に配置しました。iPhone では、テキストを表示する領域が少ないため、単純にテキストが長くなります。Mac と iPad で背景画像を表示しているときにその位置に背景画像を配置するように Web サイトに伝えたいことと、iPhone の新しい位置を指定する別の条件が必要です。

ありがとうございました。

4

1 に答える 1

0

レスポンシブ Web デザインのガイドラインを読んでください。これには CSS メディア クエリを使用してください。

例:-
http://www.w3.org/TR/css3-mediaqueries/#media0
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/

于 2012-10-19T11:54:35.457 に答える