试图使我的网站响应

我使用下面的CSS代码。我想要做的是，如果用户在iPad上，我希望背景图像为headerold.jpg或某种方式使当前的headernew.jpg能够在iPad上正确显示。目前每一端的一部分被切断。我已经尝试了@media查询，但我无法让代码正常工作。任何帮助，将不胜感激。试图使我的网站响应

感谢罗杰

div.art-header-jpeg 
{ 
position: absolute; 
top: 0; 
left:-50%; 
width: 1344px; 
height: 150px; 
background-image: url('../img/headernew.jpg'); 
@media all and (max-width: 1000px) {background-image: url('../img/headerold.jpg');} 
background-repeat: no-repeat; 
background-position: center center; 
}

来源

2013-09-10 user2751396

我们需要查看完整的@media查询，以便告诉您它是否有问题。 – DiMono

这可以帮助你。 http://stackoverflow.com/questions/17790751/ipad-specific-code-within-css – larrylampco

你可以做这样的事情。

CSS：

img.bg { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

@media screen and (max-width: 1024px) { /* Specific to a particular image (change accordingly*/ 
    img.bg { 
    left: 50%; 
    margin-left: -512px; /* 50% */ 
    } 
}

但是也有不同的方法，包括一个jQuery的方法。你应该检查一下关于它的讨论here。

来源

2013-09-10 20:41:07 fditz

我想让headernew.jpg在iPad上正常显示以及其他电脑屏幕，但首先只是iPad。如果我删除位置：绝对，那么完整的标题向右移动，只显示标题的大约50％。有什么我需要补充像在另一篇文章中提到的像这样..

<meta name="viewport" content="width=device-width, initial-scale=1">

如果是的话应该放置在哪里？

我的代码现在看起来像这样;

div.art-header-jpeg 
{ 
position: absolute; 
top: 0; 
left:-50%; 
width: 1344px; 
height: 150px; 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
div.art-header-jpeg 
background-image: url('../img/headernew.jpg'); 
} 
background-repeat: no-repeat; 
background-position: center center; 
}

来源

2013-09-10 21:51:07 user2751396

试图使我的网站响应

回答

相关问题