Question

我正在建立一个网站，我已经在Mac和iPad上工作了。当我在iPhone上看到它时，其中一个页面没有正确放置背景图像。我在网站上使用了2张背景图片，我已将它的高度设置为1200px左右。当我在iPhone上看到相同的页面时，所有文本都会结束并使页面变长。我的页脚图像保持在相同位置，文本与其重叠。它不应该像iPad一样工作，因为我已经将所有文本都包含在内了吗？我注意到问题是图像是在身体上设置的，因为它不是a，它不会跟随文本增加的长度。如何指定专门用于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上观看背景图像时将背景图像放在正确位置，以及为iPhone指定新位置的其他条件。

谢谢。

Answer 1

阅读一些响应式网页设计指南..使用CSS媒体查询...

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

iPhone和iPad之间的身体形象位置

1 个答案: